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HTML 技术 经 过 了 很 长 的 发 展 ， 版 本 不 断 更 新 ， 每 一 次 更 新 都 为 网 页 设计 工作 带 来 
了 巨大 的 变化 。HTML 的 上 一 个 版 本 诞生 于 1999 年 ， 此 后 ，Web 世界 已 经 经 历 了 巨变 。 


虽然 HTMLS 仍 处 卫 


完善 之 中 , 但 是 现在 大 部 分 的 浏览 器 已 经 具备 了 文 持 某 些 HTMLS 新 


特性 的 功能 。 在 2007 年 ，HTML 5 被 W3C 所 接受 ， 正 式 成 为 网 页 设计 标准 。 在 当前 市 场 
应 用 中 , HTML 5 将 成 为 HTML、XHTML 以 及 HTML DOM 的 新 标准 。 和 之 前 的 版 本 相 比 ， 
HTML 5 的 功能 更 加 强大 ， 并 且 支 持 移动 Web 应 用 。 


本 书 的 内 容 


本 书 分 5 篇 ， 共 


17 章 ， 循 序 渐进 地 讲解 了 HTML 5 技术 的 基本 知识 。 本 书 从 Web 开发 


标准 与 网 页 网 站 制作 介绍 讲 起 ， 依 次 讲解 了 网 页 设计 技术 基础 ，HTML 5 的 整体 架构 ， 体 验 


基本 元 素 ， 使 用 表单 元 素 ， 音 频 和 视频 应 用 详解 ， 绘 图 应 用 详解 ， 数 据 存储 应 用 详解 ， 使 用 


Web Sockets API, 使 用 Geolocation API, 使 用 Web Workers API, 在 Android 手机 中 使 用 HTML 


5， 游 戏 实战 ， 统 计 医 


实战 ， 特 效 实战 ，Web 设计 中 的 典型 模块 ， 文 件 操作 实战 ， 使 用 HTML 


5+CSS 3 开发 商业 站 点 实例 等 知识 。 上 述 内 容 几 乎 涵盖 了 HTML 5 技术 中 的 所 有 主要 内 容 ， 


本 书 特色 


全 书 内 容 言 简 意 赎 ， 讲 解 方法 通俗 易 懂 、 详 细 ， 不 但 适合 网 页 设计 高 手 们 学 习 ， 也 特别 有 利 
于 初学 者 学 习 并 消化 。 


本 书 内 容 丰 富 ， 讲 解 细 致 ， 我 们 的 目标 是 通过 一 本 图 书 提供 多 本 图 书 的 价值 ， 读 者 可 以 
根据 自己 的 需要 有 选择 地 阅读 。 在 内 容 的 编写 上 ， 本 书 具 有 以 下 特色 : 


(1) 结构 合理 


从 用 户 的 实际 需要 出 发 ， 科 学 安排 知识 结构 ， 内 容 由 浅 入 深 ， 叙 述 清楚 。 


(2) 遵循 “理论 加 实践 ”这 一 主线 


为 了 使 广大 读者 彻底 弄 清楚 HTML 5 技术 的 精髓 ， 在 讲解 每 一 个 知识 点 时 ， 通 过 具体 地 


(3) 易学 易 懂 


演示 实例 讲解 了 每 一 个 知识 点 的 具体 用 法 。 


本 书 内 容 条 理 清 晰 、 语 言 简洁 ， 可 以 帮助 读者 快速 掌握 每 个 知识 点 。 使 读者 既 可 以 按照 


本 书 编排 的 章节 顺序 进行 学 习 ， 也 可 以 根据 自己 的 需要 对 某 一 章节 进行 针对 性 的 学 习 。 


(4) 实用 性 强 


本 书 彻底 握 弃 枯燥 的 理论 和 简单 的 操作 ， 注 重 实用 性 和 可 操作 性 ， 通 过 详实 的 语言 和 细 
腻 的 笔法 ， 详 细 讲 解 了 HTML 5 各 个 知识 点 的 基本 知识 。 
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(5) 内 容 全 面 


本 书 可 以 称 为 “内 容 最 全 面 的 一 本 HTML 5 开发 书 ” 无 论 是 传统 网 页 技术 开发 的 知识 点 ， 
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数据 存储 、API 等 知识 ， 甚 至 Android M iOS 移动 Web 的 


相关 培训 机 构 的 老师 和 学 员 
从 事 移动 Web 开发 的 程序 员 
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第 一 篇 ”基础 知识 篇 
第 1 意 网 页 设计 技术 基础 


随 着 计算 机 技术 的 普及 和 网 络 技术 的 发 展 ， 互 联网 已 经 成 为 人 们 生活 中 不 可 缺少 的 一 部 
分 ， 各 种 各 样 的 网 站 纷纷 建立 起 来 。 在 众多 的 网 页 设计 技术 中 ，HTML 5 是 当前 最 流行 的 技 
术 之 一 。 本 章 将 简要 介绍 网 页 设计 的 基础 知识 、Web 标准 布局 知识 和 常用 的 网 页 制作 工具 ， 
TEM T HTML 5 的 全 新 功能 。 


1.1 认识 网 页 和 网 站 


网 页 和 网 站 是 相互 关联 的 两 个 因素 。 两 者 之 间 相 互 作用 ， 共 同 推动 了 互联 网 技术 的 飞速 
发 展 。 本 节 将 对 网 页 和 网 站 的 基本 概念 进行 简要 说 明 。 


1.1.1 网 页 

网 页 和 网 站 是 有 差别 的 ， 例 如 平常 说 的 搜狐 、 新 浪 和 网 易 等 都 是 网 站 ， 而 新 浪 上 的 一 则 
体育 新 闻 就 是 一 个 网 页 。 从 严格 意义 上 讲 , 网 页 是 Web 站 点 中 使 用 HTML 等 标记 语言 编写 而 
成 的 单位 文档 。 它 是 Web 中 的 信息 载体 。 网 页 由 多 个 元 素 构成 ， 一 个 典型 的 网 页 由 如 下 几 个 
元 素 构成 。 

(OD 文本 

文本 就 是 文字 ， 是 网 页 中 的 最 重要 的 信息 ， 在 网 页 中 可 以 通过 字体 、 大 小 、 颜 色 、 底 纹 、 
边框 等 来 设置 文本 的 属性 。 在 网 页 概念 中 的 文本 是 指 文字 ， 但 不 是 图 片 中 的 文字 。 在 网 页 种 
作 中 ， 文 本 可 以 方便 地 设置 成 各 种 字体 、 大 小 和 颜色 。 

(2) 图 像 

图 像 是 页 面 中 最 重要 的 构成 部 分 ， 图 像 就 是 网 页 中 的 图 ， 不 管 是 明星 图 片 还 是 自然 风光 
图 片 。 在 网 页 中 只 有 加 入 图 像 后 才能 使 页 面 达到 完美 的 显示 效果 ， 可 见 图 像 在 网 页 中 的 重要 
性 。 在 网 页 设计 中 用 到 的 图 片 一 般 为 JPG 和 GIF 格式 。 

(3) 超 链接 

超 链 接 是 指 从 一 个 网 页 指向 另 一 个 目的 端的 链接 ， 是 从 文本 、 图 片 、 图 形 或 图 像 映 射 到 
全 球 广域网 上 的 网 页 或 文件 的 指针 。 在 因特网 上 ， 超 链接 是 网 页 之 间 和 Web 站 点 之 中 主要 的 
导航 方法 。 由 此 可 见 ， 超 链接 是 一 个 神奇 的 功能 ， 移 动 你 的 鼠标 就 可 以 逛 遍 全 世界 。 

(4) 表格 

表格 大 家 都 知道 ， 平 常生 活 中 经 常见 到 小 如 值 日 轮流 表 ， 大 到 国家 统计 局 的 统计 表 。 其 
实 表 格 在 网 页 设计 中 的 作用 远 不 止 如 此 ， 它 是 传统 网 页 排版 的 灵魂 ， 即 使 CSS 标准 推出 后 也 
能 够 继续 发 挥 不 可 限量 的 作用 。 通 过 表格 可 以 精确 地 控制 各 网 页 元 素 在 网 页 中 的 位 置 。 


c— 


O HTML 5 开发 从 入 门 到 精通 


(5) 表单 
表单 的 作用 很 重要 ， 它 是 用 来 收集 站 点 访问 者 信息 的 域 集 ， 是 网 页 中 站 点 服务 器 处 理 的 
一 组 数据 输入 域 。 当 访问 者 单 击 按钮 或 图 形 来 提交 表单 后 ， 数 据 就 会 传送 到 服务 器 上 。 它 是 
非常 重要 的 通过 网 页 与 服务 器 之 间 传 递 信息 的 途径 ， 表 单 网 页 可 以 用 来 收集 浏览 者 的 意见 和 
建议 ， 以 实现 浏览 者 与 站 点 之 间 的 互动 。 
(6) Flash 动画 
Flash 一 经 推出 后 便 迅 速成 为 最 重要 的 Web 动画 形式 之 一 。Flash 利用 其 自身 所 具有 的 关 
键 帧 补 间 、 运 动 路 径 、 动 画 蒙 版 、 形 状 变形 和 洋 区 皮 等 动画 特性 ， 不 仅 可 以 建立 Flash 电影 ， 
而 且 可 以 把 动画 输出 为 不 同 的 文件 格式 的 播放 文件 。 
(7) 框架 
框架 是 网 页 中 的 一 种 重要 组 织 形式 之 一 ， 它 能 够 将 相互 关联 的 多 个 网 页 的 内 容 组 织 在 一 
个 浏览 器 窗口 中 显示 。 从 实现 方法 的 定义 上 讲 ， 框 架 由 一 系列 相互 关联 的 网 页 构成 ， 并 且 相 
互 间 通过 框架 网 页 来 实现 交互 。 框 架 网 页 是 一 种 特别 的 HTML 网 页 ， 它 可 将 浏览 器 视窗 分 为 
不 同 的 框架 ， 每 一 个 框架 可 显示 一 个 不 同 网 页 。 


" 


如 图 1-1 所 示 的 雅虎 中 国 主页 是 由 上 述 元 素 构成 的 典型 网 页 。 
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图 1-1 雅虎 中 国 的 主页 


上 述 各 种 网 页 元 素 组 合 在 一 起 ， 为 所 有 的 浏览 者 呈现 了 绚丽 的 界面 效果 。 在 本 书后 面 的 
章节 中 ， 将 和 读者 一 起 来 领略 HTML 5 的 神奇 ， 共 同 开始 我 们 的 网 页 设计 神奇 之 旅 。 


1.1.2 ”网 站 


搜狐 、 新 浪 、CSDN、 网 易 等 都 是 网 站 ， 网 站 是 由 网 页 构成 的 ， 它 是 一 系列 页 面 构成 的 整 
2 mü 


u 第 1 章 ， 网 页 设计 技术 基础 1 了 
体 。 一 个 网 站 可 能 由 一 个 页 面 构成 ， 也 可 能 由 多 个 页 面 构成 ， 并 且 这 些 构成 的 页 面相 互 间 存 


在 着 某 种 联系 。 一 个 典型 网 站 的 具体 结构 如 图 1-2 所 示 。 
上 述 结构 中 的 各 种 元 素 ， 在 服务 器 上 将 被 保存 在 不 同 的 文件 夹 内 


图 1-2 网 站 基本 结构 图 图 1-3 网 站 存储 结构 图 


1.1.3 ”网 站 制作 流程 


， 一 般 如 图 1-3 所 示 。 


Upfile 
(上 传 文件 夹 ) 


设计 师 和 企业 决策 者 是 制作 网 站 的 关键 人 物 。 所 以 要 从 决策 者 决定 做 网 站 的 那 一 刻 作为 


(2) 需求 分 析 : 充分 考虑 用 户 的 需求 和 站 点 拥有 者 的 需求 ， 确 定 当前 的 业务 流程 。 


分 析 浏 览 用 户 的 思维 方式 ， 并 对 竞争 对 手 的 信息 进行 分 析 。 
(3) 综合 内 容 : 确定 各 个 页 面 所 要 展示 的 信息 ， 进 行 页 面 划分 。 


制作 网 站 的 开始 。 网 站 制作 的 基本 流程 如 下 。 
(1) 初始 商讨 ， 决 策 者 们 确定 站 点 的 整体 定位 和 主题 ， 明 确 建立 此 网 站 的 真正 目的 ，3 
确定 网 站 的 发 布 时 机 。 


[ml 
us 
Ir 
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(4) 页 面 布 局 ， 设 计 页 面 : 根据 页 面 内 容 进 行 对 应 的 页 面 设计 ， 在 规划 的 页 面 上 使 内 容 


合理 地 展现 出 来 。 


(5) 测试 : 对 每 个 设计 好 的 分 页 进行 浏览 测试 ， 在 最 后 要 对 整个 网 站 的 页 面 进行 整体 


测试 。 


注意 一 一 合理 为 最 “ 美 ” 
在 设计 一 个 网 站 的 时 候 ， 应 该 遵循 “合理 、 简 约 、 美 观 、 大 方 ” 


四 个 原则 。 也 就 是 说 ， 


复杂 的 并 不 一 定 是 最 好 的 ， 合 理 的 才 是 最 好 的 。 网 站 设计 的 基本 原则 如 下 。 


(1) 网 页 内 容 要 便于 阅读 。 

(2) 站 点 内 容 要 精 、 专 和 及 时 更 新 。 

(3) 注重 整体 的 色彩 搭配 。 

(4) 考虑 带宽 因素 。 

(5) 适当 考虑 不 同 浏览 器 、 不 同 分 辨 率 的 情况 。 


1.1.4 网 页 设计 流程 


网 页 和 网 站 技术 是 互联 网 技术 的 基础 ， 通 过 合理 的 操作 流程 可 以 快速 地 制作 出 美观 大 方 


的 站 点 。 


(1) 整体 选 题 ， 选 题 要 明确 ， 例 如 我 要 在 这 个 网 页 中 显示 某 球 产 


能 以 公司 简介 为 主题 。 


品 的 神奇 功效 ， 那 就 不 


(2) 准备 素材 资料 : 根据 页 面 选择 的 主题 准备 好 素材 ， 例 如 某 款 产品 的 图 片 。 
G) 规划 页 面 布局 : 根据 前 两 步 确定 的 选 题 和 准备 的 资料 进行 页 面 规划 ， 确 定 页 面 的 总 


体 布局 。 上 述 工 作 可 以 通过 画 草 图 的 方法 实现 ， 也 可 以 在 编辑 器 工 


El 


内 里 直接 规划 ， 例 如 在 


EN 3 


HTML 5 开发 从 入 门 到 精通 


Dreamweaver 中 。 

(4) 插入 素材 资料 : 将 处 理 过 的 素材 和 资料 插入 到 布局 后 页 面 的 指定 位 置 。 

(5) 添加 页 面 链接 : 根据 整体 站 点 的 需求 ， 在 页 面 上 添加 超级 链接 ， 实 现 站 点 页 面 的 路 
度 访 问 。 

(6) 页面 美化 : 将 上 面 完 成 的 页 面 进 行 整体 美化 处 理 。 例 如 ， 利 用 CSS 将 表格 线 细 化 ， 
设置 文字 和 颜色 ， 对 图 片 进行 滤 镜 和 搭配 处 理 等 操作 。 


1.4.5 ”发 布 站 点 
发 布 站 点 是 整个 工作 的 倒数 第 二 步 ， 具 体操 作 流 程 如 下 。 
(1) 申请 域名 : 选择 合理 、 有 效 的 域名 。 
(2) 选择 主机 : 根据 站 点 的 状况 确定 主机 的 方式 和 配置 。 
G) 选择 硬件 ， 如果 需 要 自己 的 站 点 体现 出 更 为 强大 的 功能 ， 可 以 配置 自己 特定 的 设备 
产品 。 
(4) 软件 选择 : 选择 与 自己 购买 的 硬件 相配 套 的 软件 ， 例 如 服务 器 的 操作 系统 和 安全 软 
件 等 。 
(5) 网 站 推广 ， 充分 利用 搜索 引擎 和 发 布 广告 的 方式 对 网 站 进行 宣传 。 
制作 网 站 的 最 后 一 步 是 维护 。 和 传统 产品 一 样 ， 设 计 师 们 也 需要 做 一 些 售 后 服务 的 工作 ， 
也 就 是 对 网 站 进行 定期 维护 。 


12 Web 标准 布局 介绍 


无 论 做 什么 事情 都 需要 遵循 一 定 的 标准 和 规则 ， 设 计 网 页 也 同样 如 此 ， 也 需要 一 个 
标准 来 约束 迅猛 增长 的 网 页 数量 。 随 着 网 络 技术 的 飞速 发 展 ， 各 种 应 用 类 型 的 站 点 纷纷 
建立 。 因 为 网 络 的 无 限 性 和 共享 性 ， 以 及 各 种 设计 软件 的 推出 ， 多 样 化 的 站 点 展示 方式 
便 应 运 而 生 。 为 保证 设计 出 的 站 点 信息 ， 能 完整 地 展现 在 用 户 面前 ，Web 标准 技术 便 应 
运 而 生 。 

1.2.1 当前 的 Web 开发 标准 

Web 标准 是 所 有 站 点 在 建设 时 必须 遵循 的 一 系列 硬性 规范 。 从 页 面 构成 来 看 网 页 主要 由 
三 部 分 组 成 : 结构 (Structure), KIL (Presentation) 和 行为 《Behavior)。 所 以 对 应 的 Web ER 
准 由 如 下 三 方面 构成 。 

(1) 结构 化 标准 语言 

当前 使 用 的 结构 化 标准 语言 是 HTML 和 XHTML， 下 面 将 对 这 两 种 语言 进行 简要 介绍 。 

HTML (Hyper Text Markup Language， 超 文本 标记 语言 )， 是 构成 Web 页 面 的 主要 工具 ， 
用 来 表示 网 上 信息 的 符号 标记 语言 。 通 过 HTML, 将 需要 表达 的 信息 按 某 种 规则 写成 HTML 
文件 ， 通 过 专用 的 浏览 器 来 识别 ， 并 将 这 些 HTML 翻译 成 可 以 识别 的 信息 ， 就 是 所 见 到 
Br. HTML 语言 是 网 页 制作 的 基础 ， 是 初学 者 必需 掌握 的 内 容 。 当 前 的 最 新 版 本 是 
HTML 5. 
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XHTML (Extensible Hyper Text Markup Language)， 是 根据 在 XML 标准 建立 起 来 的 标识 
语言 ， 是 一 种 由 HTML 向 XML 之 间 过 渡 的 语言 。 

(2) 表现 性 标准 语言 
前 的 表现 性 语言 是 本 书 讲 的 CSS (Cascading Style Sheets， 层 色 样 式 表 )， 当 前 最 新 的 
CSS 规范 是 W3C 于 1982 年 5 H 12 日 推出 的 CSS2。 通 过 CSS 可 以 对 网 页 进行 布局 ， 控 制 网 
页 的 表现 形式 。CSS 可 以 与 XHTML 语言 相 结合 ， 实 现 页 面 表 现 和 结构 的 完整 分 离 ， 提 高 了 
站 点 的 使 用 性 和 维护 效率 。 
当前 的 行为 标准 是 DOM (Document Object Model， 文 档 对 象 模型 ) 用 户 和 ECMAScript» 
根据 W3C DOM 规范 ，DOM 是 一 种 与 浏览 器 、 平 台 和 语言 的 接口 ， 使 得 用 户 可 以 访问 页 面 
其 他 的 标准 组 件 。.DOM 解决 了 Netscaped 的 Java Script 和 Microsoft 的 Jscript 之 间 的 冲突 。 给 
予 web 设计 师 和 开发 者 一 个 标准 的 方法 ， 让 他 们 来 访问 自己 站 点 中 的 数据 、 脚 本 和 表现 层 对 
象 。 从 本 质 上 讲 ， DOM 是 一 种 文档 对 象 模型 是 建立 在 网 页 和 Script 及 程序 语言 之 间 的 桥梁 。 

上 述 标准 大 部 分 由 W3C 组 织 起 草 和 发 布 ， 也 有 一 些 是 其 他 标准 组 织 制订 的 标准 ， 比 如 
ECMA 的 ECMAScript 标准 。 

ECMAScript 是 ECMA (European Computer Manufacturers Association) 制定 的 标准 脚本 
语言 (JAVAScript)。 


1.2.2 为 什么 使 用 Web 标准 
Web 标准 就 是 网 页 业界 的 ISO 标准 ， 推 出 Web 标准 的 主要 目的 是 不 管 是 哪 一 家 的 技术 ， 
都 要 遵循 这 个 规范 来 设计 、 制 作 并 发 展 ， 这 样 大 家 的 站 点 才能 以 完整 、 标 准 的 格式 展现 出 来 。 
具体 来 说 ， 使 用 Web 标准 主要 目的 如 下 。 
口 提供 最 多 利益 给 最 多 的 网 站 用 户 ， 包 括 世 界 各 地 的 。 
口 保证 任何 网 站 文 挡 都 能 够 长 期 有 效 ， 不 必 在 软件 升级 后 进行 修改 。 
口 大 大 简化 了 代码 ， 并 降低 了 站 点 建设 成 本 。 
口 让 网 站 更 容易 使 用 ， 能 适应 更 多 不 同 用 户 和 更 多 网 络 设备 。 因 为 硬件 制造 商 也 按照 此 
标准 推出 自己 的 产品 。 
O 当 浏 览 器 版 本 更 新 ， 或 者 出 现 新 的 网 络 交 互 设备 时 ， 也 能 确保 所 有 应 用 能 够 继续 正确 
执行 。 
使 用 Web 标准 后 ， 不 仅 对 浏览 用 户 带 来 了 多 元 化 的 浏览 展示 ， 而 且 对 站 点 拥有 者 和 维护 
人 员 带 来 极 大 的 方便 。 使 用 Web 标准 后 ， 对 浏览 用 户 的 具体 意义 如 下 。 
口 页 面 内 容 能 被 更 多 的 用 户 所 访问 
口 页 面 内 容 能 被 更 广泛 的 设备 所 访问 。 
口 用 户 能 够 通过 样式 选择 定制 自己 的 表现 界面 。 
C) 使 文件 的 下 载 与 页 面 显 示 速 度 更 快 。 
使 用 Web 标准 后 ， 对 网 站 所 有 者 的 具体 意义 如 下 。 
口 带宽 要 求 降低 ， 降 低 了 站 点 成 本 。 
口 使 用 更 少 的 代码 和 组 件 ， 使 站 点 更 加 容易 维护 。 
口 更 容易 被 搜索 引擎 搜索 到 。 
口 使 改版 工作 更 加 方便 ， 不 再 需要 变动 页 面 内 容 。 
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口 能 够 直接 提供 打印 版 本 ， 不 需要 另行 复制 打印 内 容 。 
Q 大 大 提高 了 站 点 的 易 用 性 。 


1.2.3 CSS 布局 标准 
作为 一 个 站 点 页 面 设 计 人 员 ， 必 须 严格 遵循 前 面 介绍 的 标准 ， 使 页 面 完美 地 展现 在 用 户 
面前 。 在 推出 Web 标准 以 前 ， 站 点 网 页 是 以 <table> 元 素 做 为 布局 的 。 从 本 质 上 看 来 ， 传 统 的 
<table> 元 素 布 局 和 现在 的 CSS 布局 所 遵循 的 是 截然 不 同 的 思维 模式 。 下 面 将 介绍 传统 布局 和 
CSS 布局 的 区 别 ， 并 着 重 说 明 标 准 布局 的 重要 意义 。 
1. 传统 页 面 布局 
传统 的 页 面 布局 方法 是 使 用 表格 <table> 元 素 ， 其 具体 实现 方法 如 下 。 
d) 首先 ， 使 用 <table> 元 素 的 单元 格 根据 需要 将 页 面 划 分 为 不 同 区 域 ， 并 且 在 划分 后 的 
单元 格 内 可 以 继续 典 套 其 他 的 表格 内 容 。 
(2) 然后 ， 利 用 <table> 元 素 的 属性 来 控制 内 容 的 具体 位 置 ， 如 algin 和 valgin。 
2. 标准 布局 
在 Web 标准 布局 的 页 面 中 ， 表 现 部 分 和 结构 部 分 是 各 自 独 立 的 。 结 构 部 分 是 用 HTML 
或 XHTML 编写 的 ， 而 表现 部 分 是 用 可 以 调用 的 CSS 文件 实现 的 。 这 样 ， 实 现 了 页 面 结构 和 
表现 内 容 的 分 离 ， 方 便 了 页 面 维护 。 例 如 ， 下 面 的 代码 使 用 了 标准 布局 。 
<html> 
<head> 


«meta http-equiv="Content-Type" content-"text/html; charset=gb2312"> 
<title> 无 标题 文档 </title> 


<link href="style.css" type="text/css" rel="stylesheet"/> <!-- 调 用 样式 代码 --> 
</head> 
<body> 
<table width="600" height="200" border="0" align="center"> 
<tr><td><div class="unnamedl"> 欧 锦 赛 A 组 </div></td></tr> <!-- 使 用 样式 --> 


<tr><td><div class="unnamedl"> 法 国 </div></td></tr> 
<tr><td><div class="unnamed1"># 兰 </div></td></tr> 
<tr><td><div class="unnamed1"> 意 大 利 </div></td></tr> 
<tr><td><div class="unnamed1"> 罗 马 尼 亚 </div></td></tr> 

</table> 

</body> 

</html> 


文件 style.css 的 具体 代码 如 下 。 
< 定义 的 样式 -> 


.unnamed]1 í 
background-position: center; 
text-align:center; 


color:#CC0000; 
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从 上 述 演示 代码 中 可 以 清楚 看 出 ， 在 使 用 CSS 标准 样式 后 ， 结 构 部 分 和 表现 部 分 已 经 完 


全 分 离 了 。 如 果 想 继续 修改 字 的 颜色 为 “green”， 则 只 需 对 CSS 文件 中 的 color 值 进行 修改 。 


这 样 ， 如 果 整 个 站 点 的 页 面 都 调用 此 CSS 文件 ， 就 只 需 改变 此 样式 的 某 属性 值 ， 整 个 站 点 的 
此 属性 元 素 都 将 修改 。 


这 主要 体现 在 如 下 几 个 方面 。 
O 由 于 页 面 的 表现 部 分 由 样式 文件 独立 控制 ， 所 以 使 站 点 的 改版 工作 变 得 更 加 轻松 
spp 
口 由 于 页 面 内 容 可 以 使 用 不 同 的 样式 文件 ， 可 以 使 页 面 内 容 能 够 完全 适应 各 种 应 用 
设备 。 
O 充分 结合 XHTML 的 清晰 结构 ， 实 现 建议 的 数据 处 理 。 


口 根据 XHTML 的 明确 


所 以 说 当 使 用 标准 样式 后 ， 可 以 实现 页 面 结构 和 表现 的 分 离 ， 对 站 点 设计 具有 重大 意义 。 


和 语意 ， 轻 松 实现 搜 索 工 作 。 


13 ”常用 的 网 页 制作 工具 


在 当 


前 市 面 中 最 为 流行 的 网 页 制作 工具 ， 都 是 可 视 化 的 开发 工具 。 通 过 这 些 工具 可 以 大 


大 方便 设计 师 发 挥 创作 灵感 ， 设 计 出 一 个 个 精美 站 点 和 网 页 。 在 网 页 设计 应 用 中 ， 最 为 常用 


的 可 视 化 帮 


F 发 工具 就 是 Dreamweaver. 


1.3.1 Dreamweaver 简介 


Dreamweaver 是 美国 Macrom edia 公司 开发 的 网 页 制作 工具 , 是 集 网 页 制作 和 管理 网 站 于 


一 身 的 所 见 即 所 得 网 页 编辑 器 。Dreamweaver 是 第 一 套 针 对 专业 网 页 设计 师 特 别 开 发 的 视觉 


化 网 页 开 


发 工具 ， 利 用 它 可 以 轻而易举 地 制作 出 跨越 平台 限制 和 跨越 浏览 器 限制 的 网 页 。 因 


为 其 强大 功能 ， 后 来 被 Adobe 公司 收购 。 


Dreamweaver 文 持 最 新 的 DHTML 和 CSS 标准 ， 可 以 设计 出 生动 的 DHTML 动画 、 多 层 
次 的 Layer 以 及 CSS 样式 表 。 另 外 ，Dreamweaver 还 具有 如 下 三 个 特点 。 

口 最 佳 的 制作 效率 

Dreamweaver 可 以 用 最 快速 的 方式 将 Fireworks, FreeHand 或 Photoshop 等 文件 移 至 网 页 
上 。 使 用 检 色 吸管 工具 选择 屏幕 上 的 颜色 ， 这 样 可 以 设 定 最 接近 的 网 页 安全 色 。 对 于 选单 、 
快捷 键 和 格式 控制 ， 都 上 只 要 


体 运 用 流 


个 简单 步骤 便 可 完成 。Dreamweaver 能 与 设计 者 喜爱 的 设计 工 


具 ， 如 Playback Flash, Shockwave 和 外 挂 模 组 等 搭配 ， 无 需 离开 Dreamweaver 便 可 完成 ， 整 
程 自 然 顺 畅 。 除 此 之 外 ， 只 要 单 击 程序 设置 的 按钮 便 可 使 Dreamweaver. 自动 开启 


Firework 或 Photoshop 来 进行 编辑 与 设 定 图 档 的 最 佳 化 。 


口 网 站 管理 


使 用 


网 站 地 图 可 以 快速 


关 作 网 站 纵 形 、 设 计 、 更 新 和 重组 网 页 。 改 变 网 页 位 置 或 文件 名 


$K, Dreamweaver 将 自动 更 新 所 有 链接 。 使 用 HTML IB. HTML 属性 标签 和 一 般 语法 的 搜寻 


及 置换 功 


Q 无 可 比拟 的 控制 能 力 


能 使 得 复杂 的 网 站 更 新 变 得 迅速 又 简单 。 
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Dreamweaver 是 唯一 提供 


Roundtrip HTML、 视 觉 化 编辑 与 原始 码 编辑 同步 设计 的 工具 。 


它 包 含 HomeSite M BBEdit 等 主流 文字 编辑 器 。 帧 ( frames) 和 表格 的 制作 速度 快 得 令 人 叹服 ， 


甚至 可 以 排序 或 格式 化 表格 群 组 。Dreamweaver 支持 精准 定位 ， 可 以 轻易 将 转换 成 表格 的 图 
层 以 拖拉 置 放 的 方式 进行 版 面 配 置 。 所 见 朋 


Dreamweaver 包含 多 个 版 本 ， 每 个 版 本 
安装 合适 的 版 本 。 本 书后 面 知识 的 介 绢 


4 过 程 中 ， 采 用 了 Dreamweaver CS5 作为 开发 工具 。 


Sb Ak 


Ke Re * 


r1 


所 得 的 功能 能 够 成 功 整 合 动 态 式 视觉 编辑 及 电子 


HH 
E 


的 基本 功能 类 似 。 读 者 可 以 根据 个 人 的 需要 ， 来 


和 


其 他 版 本 相 比 ，Dreamweaver CS5 新 增 了 如 下 几 个 功能 。 
口 Ajax 的 Spry 框架 


计 、 开 


户 提供 更 丰富 体验 
口 Spry 构件 
Spry 构件 是 预 置 的 常 月 


通过 Adobe Dreamweaver CS5, 可 以 使 用 Ajax 的 Spry 框架 进行 动态 用 户 界 捍 
发 和 部 署 。Ajax 的 Spry 框架 是 一 个 面向 Web 设计 人 员 的 JavaScript 库 ， 用 
他 Ajax 框架 不 同 , 可 以 同时 为 设计 人 员 和 开发 人 员 所 用 。 


` 


的 网 页 ,Spry 与 


的 可 视 化 设 
于 构建 向 用 


驱动 的 列表 和 表格 、 折 又 构 付 
口 Spry 效 


的 所 有 元 素 。 可 以 添加 Spry 效果 来 放大 、 收 缩 、 渐 隐 和 高 亮 


FH 


Z 


Spry 效果 是 一 种 提高 网 站 外 观 吸引 力 的 简洁 方式 。 这 种 效果 几乎 可 应 用 于 HTML 页 面 上 


方式 更 改 页 


Dreamweaver 提供 一 缆 


局 | 


元 素 ， 以 及 执行 更 多 操作 。 
口 CSS 布局 


全 运行， 并 且 在 代码 ! 


Dreamweaver 


关 的 问题 。 在 代码 视图 


HE 


l 1 的 需 
生 检查 


Ao 


用户 界面 组 件 ， 可 以 使 用 CSS 
网 页 中 。 使 用 Dreamweaver 可 以 将 多 个 Spry 构件 添加 到 自 
FE、 选项 卡 式 界面 和 具有 验证 功能 的 表单 元 素 。 


自 定义 这 些 组 件 ， 然 后 将 其 添加 到 
己 的 页 面 中 ， 这 些 构件 包括 XML 


显示 元 


素 ， 在 一 段 时 间 内 以 可 视 


日 预先 设计 的 CSS 布局 ， 它 们 可 以 帮助 设计 者 快速 设计 好 页 面 并 开 
提供 了 丰富 的 内 联 注释 以 帮助 用 户 了 解 CSS 页 面 布局 。Web 上 的 大 多 
数 站 点 设计 都 可 以 被 归 类 为 一 列 、 两 列 或 三 列 式 布局 , 而 且 每 种 布 
如 标题 和 脚注 )。Dreamweaver 提供 了 一 个 
定义 这 些 设计 以 满足 

口 浏览 器 兼容 | 


局 都 包含 许多 附加 元 素 ( 例 
综合 性 列表 ， 设 计 人 员 可 以 自 


包含 基本 布局 设计 的 


VA 


新 的 浏 


览 器 兼容 性 检查 功能 可 生成 报告 ， 指 出 各 种 浏览 器 中 与 CSS fH 


中 ， 这 些 问 题 以 绿 


色 下 划 线 来 标记 ， 因 此 用 户 可 以 准确 知道 产生 问题 


的 代码 位 置 。 在 看 


角 定 问题 之 后 ， 如 果 知 道 


细 信 息 ， 则 可 以 访问 Adobe CSS Advisor。 
L] Adobe CSS Advisor 


Adobe CSS Advisor 网 立 


占 包含 有 关 最 新 CSS 问题 的 信息 , 在 浏 


解决 方案 ， 则 可 以 快速 解决 问题 ， 如 果 需 要 了 解 详 


览 器 兼容 性 检查 过 程 中 可 通 


过 Dreamweaver 用 户 界 面 直接 访问 该 网 站 。CSS Advisor 不 止 是 一 个 论坛 、 一 个 wiki 页 面 或 
一 个 讨论 组 ， 而 且 可 以 方便 地 为 现 有 内 容 提供 建议 和 改进 意见 ， 或 者 方便 地 添加 新 的 问题 以 


使 piya 


DX ES 


S m 


H a, 25 


个 Adobe CSS Advisor 用 户 都 能 够 从 了 
Dreamweaver CS5 的 工作 界面 如 图 


1 一 


2X. rL o 


4 所 示 。 
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‘Dw | sta + | g] Oo CEES 
TDO 编辑 (E) SEW MAD 修改 (如 ”格式 (0) ASO 站 点 (3) EOW 帮助 0) 


— m 
代码 | 拆 分 | 设计 | 实时 代码 )DoÍ — 实时 视图 | 检查 | @) X C 标题 : 无 标题 文档 TRA] 
C9 回合 地 址 :[ 司 CSSER 


全 部 | 当前 


所 选 内 容 的 摘要 


未 对 当前 选 定 内容 应 用 任何 CSS 属性 。 
š 带 元 素 ， 查 看 应 用 了 
些 Css 属性 。 


ERE 

Hm Ans] eng 
文件 

B 桌面 =] 管理 站 点 


<) 网 上 分居 
© 桌面 项 目 


[koar DELIC K 7 1 9 [Unicode QUTF-8) 
属性 

r=: T: Suwa B|z| E|: 

B css ina) pe £. umo 


图 1-4 Dreamweaver CS5 工作 界面 


1.3.2 ”安装 Dreamweaver 


本 节 以 安装 Dreamweaver CSS 的 过 程 为 例 ， 向 读者 介绍 安装 Dreamweaver 的 方法 。 
Dreamweaver CS5 的 安装 步骤 如 下 。 

CD 将 安装 光盘 插入 光驱 内 ， 双 击 打开 安装 程序 图 标 国 后 ， 弹 出 “初始 化 安装 程序 ”对 
话 框 ， 如 图 1-5 所 示 。 


m Adobe 安装 程序 
初始 化 安装 程序 


图 1-5 “初始 化 安装 程序 ”对 话 框 


H 


(2) 进度 条 完成 之 后 弹出 “欢迎 使 用 ”对 话 框 ， 如 图 1-6 所 示 。 


mm 9 


(3) 单 击 【接受 】 按 钮 后 弹出 “序列 号 ”对 话 框 ， 在 此 输入 Dreamweaver 的 产品 序列 号 ， 


5 开发 从 入 门 到 精通 


欢迎 使 用 


Adobe Dreamweaver CS5 安 


Adobe 软件 许可 协议 
ADOBE 
软件 许可 协议 


用 户 须知 : 请 仔细 阅读 本 协议 。 本 软件 的 所 有 或 任何 部 分 一 经 复制 、 实 装 或 使 用 ， 浆 即 接受 本 协议 中 规定 的 所 有 
条 款 和 条 件 ， 特别 是 其 中 对 下 列 内 容 的 规定 : 可 转让 性 ( 第 4 条 ) 、 担 保 ( 第 6 和 第 7 条 ) 、 责 任 ( 第 8 条 ) 以 及 连 
接 性 和 隐私 ( 第 14 条 ) ， 以 及 特殊 规定 和 例外 ( 第 16 条 ) 。 修 同意 本 协议 与 由 您 签署 的 任何 通过 谈判 订立 的 任何 
书面 协议 一 样 。 本 协议 对 您 和 取得 软件 并 由 地 人 代表 使 用 本 软件 的 任何 法 人 实体 均 可 执行 : 例如 您 的 雇主 (如果 
适用 ) 如 不 同意 本 协议 的 条 款 ， 请 不 要 使 用 本 软件 。 有 关 本 软件 退回 和 退 款 的 信息 ,请 浏览 

htpwww adobe comlqolsuppor cn. 

您 可 以 与 ADOBE 直 接 订 立 另 一 书面 协议 ( 如 批量 许可 证 协议 ) ， 补 充 或 苦 换 本 协议 的 全 部 或 任何 部 分 。 

ADOBE 及 其 供应 商 拥有 本 软件 的 所 有 知识 产权 。 本 软件 只 供 许可 使 用 ， 不 得 出 售 。ADOBE 只 允许 你 在 遵守 本 协 
设 各 项 条 款 的 情况 下 复制 使 有 用、 下载、 安装 、 使 用 或 以 其 地 方式 受 花 于 本 软件 的 功能 或 知识 产权 。 使 用 本 软件 所 
包含 的 ， 或 通过 本 软件 访问 的 一 些 ADOBE 和 非 ADOBE 材 料 与 服务 ， 可 能 需 遵 守 其 他 条 款 与 条 件 ， 这 些 条 喜与 条 
件 一 般 载 于 单独 的 许可 协议 、 使 用 条 款 ， 或 该 材料 或 服务 内 部 或 周围 的 自述 文件 中 ,或 可 在 

httpJwww adobe com/qofhirdparty_cn 上 找到 。 您 可 以 在 该 网 站 上 找到 关于 非 ADOBE 村 料 的 必要 声明 。 


本 软件 可 能 导致 您 的 计算 机 自动 连接 到 因特网。 有关 其 地 信息 ,请 参见 第 14 和 16 条 。 


“欢迎 使 


]” 对 话 框 


图 1-6 


并 选择 “简体 中 文 。 如 图 1-7 Br. 


(4) 单 击 【 下 一 步 】 按 钮 弹出 输入 “Adobe ID” 对 话 框 ， 


可 以 跳 过 此 步 又。 如 图 1-8 所 示 。 


Adobe ID 


10 HE 


请 输入 序列 号 


: 提供 序列 号 。 o 
1192 1337 9219 4875 6506 9599 v 


HFF- Adobe Dreamweaver CS5 


n 


图 


1-7 “序列 号 ”对 话 杠 


/ 


输入 Adobe ID 


要 注册 软件 并 设 外 务 的 访问 权限 , iis A ab BP Adobe ID 


需要 Adobe ID? T Adobe ID? 


电子 邮件 (Adobe ID) 


创建 Adobe ID 729017304@qq com 


H 


图 


“AdobeID” 对 话 框 


1-8 


在 此 可 以 输入 用 户 的 也 S, 也 


S15 “网 页 设计 技术 基础 人 


(5) 单 击 【 下 一 步 】 按 钮 后 弹出 2m 对 话 框 ， 在 “位 置 ”选项 下 设置 安 闭路 径 


如 图 1-9 所 示 。 


如 图 1-10 所 示 。 


/ IB ADOBE DREAMWEAVER CS5 


安装 总 大 小 : 781 MB 


了 iles\Adobe 


81 MB (4.6 GB 可 用 ) 


图 1-9 


“安装 选项 ”对 话 框 
(6) 单 击 “ 位 置 ”后 面 的 浏览 按钮 国 ， 在 弹 ! 


于 多 


IBW ADOBE DREAMWEAVER CS5 


23 MB 


55 MB 


17 MB 


19 MB 


的 “浏览 文件 夹 ” 对 话 框 中 设置 安装 位 置 ， 


Qo 本 地 磁盘 (EO 
(o 本 地 磁盘 CO 
[Ea 


E E [S 


(C daima 
e dcache 


E] (C3) sasyMule 
D eclipse 


(Ey osT 


新 建文 件 夹 串 ) 


(7) 单 击 【安装 】 按 钮 ， 弹 出 


如 图 1-11 所 示 。 


D AdobeDreamweaver-CS5 
(C3) android-sdk-windowsi 
O Camtasia Studio 6 


D FavoriteVideo 


图 1-10 


田 O DirectShow 开 发 指南 源码 


“浏览 文件 夹 ” 对 话 相 


IHI 


“安装 ”对 话 框 ， 此 时 开始 安装 ， 进 度 条 表示 安装 进度 。 


BEH 11 


me 
e HTML 5 开发 从 入 


MA 


总 剩余 时 间 : 正在 计算 … 


图 1-11 “安装 ”对 话 框 
(8) 进度 完成 后 将 弹出 “完成 ”对 话 框 ， 单 击 【 完 成 】 按 钮 完成 安装 。 如 图 1-12 Hp. 


谢谢 
E dw MELIA TESTERCCTERI - 


Adobe Dreamweaver CS5 


观看 视频 教程 IE Adobe CS Live 服务 


图 1-12 “完成 ”对 话 杠 
当 第 一 次 打开 Dreamweaver CS5 的 时 候 ， 会 弹出 “默认 编辑 器 ”对 话 框 ， 在 此 可 以 选择 
用 户 常用 的 文件 类 型 。 如 图 1-13 所 示 。 


默认 编辑 器 EF 


Adobe Dreamweaver CSS 将 其 自身 设置 为 以 下 文件 类 型 的 默认 编辑 器 : 


I Active Server Pages (asp) [ÍV JavaScript Gs) 

[V Java Server Pages (jsp) V 层 得 样式 表 (css) 

[V ColdFusion (cfm, cfc) Iv 可 扩展 标记 语言 Cm) 
[v ASP.NET (aspx, ascx) ]v XSL 样式 表 (xsl, xslt) 


[Z PHP (php, php3, php4) 
—— mee | 
”确定 | 


图 1-13 “PASTA 05” oS UE 


IHI 
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14 HTML 5 的 新 功能 


本 节 将 详细 介绍 HTML 5 的 新 功能 ， 为 后 面 知识 的 学 习 打 下 基础 。 

1. 最 重要 的 更 新 

(1) 全 新 的 、 更 合理 的 Tag。 

多 媒体 对 象 将 不 再 全 部 绑 定 在 object 或 embed Tag 中 ， 而 是 视频 有 视频 的 Tag, 音频 有 音 
频 的 Tag. 

(2) 本 地 数据 库 

iC JJ BETA ER T ASH] SQL 数据 库 ， 以 加 速 交 互 式 搜索 、 缓 存 以 及 索引 功能 。 同 时 ， 
那些 离线 Web 程序 也 将 因此 获 益 诽 浅 。 

(3) Canvas 对 象 将 给 浏览 器 带 来 直接 在 上 面 绘制 矢量 图 的 能 力 

这 意味 着 用 户 可 以 脱离 Flash 和 Silverlight， 直 接 在 浏览 器 中 显示 图 形 或 动画 。 一 些 最 新 
的 浏览 器 ， 已 经 开始 支持 Canvas， 将 提供 API 实现 浏览 器 内 的 编辑 和 拖 放 效 果 ， 以 及 各 种 图 
形 用 户 界面 的 能 力 。 内 容 修饰 Tag 将 被 剔除 ， 而 使 用 CSS. 

2. 为 HTMLS 建立 的 一 些 规 则 

(1) 新 特性 应 该 基于 HTML、CSS、DOM 以 及 JavaScript 等 功能 。 

(2) 减少 对 外 部 插件 的 需求 ， 比 如 Flash. 

(3) 更 优秀 的 错误 处 理 。 

(4) 更 多 取代 脚本 的 标记 。 

(5) HTML 5 应 该 独立 于 设备 。 

(6) 开发 进程 应 对 公众 透明 。 

3. 新 特性 

在 HTML5 中 增加 了 如 下 主要 的 新 特性 。 

(1) 用 于 绘画 的 canvas 元 素 。 

(2) 用 于 媒介 回放 的 video 和 audio 元 素 。 

(3) 对 本 地 离线 存储 的 更 好 的 支持 。 


(4) 新 的 特殊 内 容 元 素 ， 比 如 article、footer、header、nav、section。 
(5) 新 的 表单 控件 ， 比 如 calendar、date、time、email、url、search。 


15 初次 体验 HIMI 5 的 魅力 


经 过 本 章 上 一 节 的 学 习 ， 初 步 了 解 了 HTML 5 的 新 特性 和 新 规则 。 本 节 将 通过 一 个 具体 
实例 ， 带 领 读者 体验 HTML 5 的 魅力 。 


NM 


实例 1-71 jog 
源码 路 径 daima\l\autoplay.html 
功能 在 网 页 中 自动 播放 一 个 视频 


实例 文件 autoplay.html 的 主要 代码 如 下 。 
EN 13 


e iti 
LO HTML 5 开发 从 入 门 到 精通 — 


<!DOCTYPE HTML> 

<html> 

<body> 

«video controls-"controls" autoplay="autoplay"> 
«source src-"123.ogg" type="video/ogg/> 

Your browser does not support the video tag. 

</video> 

</body> 

</html> 


上 述 代码 的 功能 是 在 网 页 中 自动 播放 名 为 “123.0gg” 视 频 文件 ， 在 代码 中 设置 的 此 视频 
文件 和 实例 文件 autoplayhtml 同属 于 一 个 目录 。 执 行 后 的 效果 如 图 1-14 所 示 。 


图 1-14 执行 效果 


由 上 述 实例 可 以 看 出 ， 不 用 任何 插件 ， 只 需 用 短 短 的 几 行 代码 ， 就 可 以 在 网 页 中 播放 视 
频 文件 。 这 仅仅 是 HTML 5 的 一 个 全 新 功能 而 已 ， 在 本 书后 面 的 内 容 中 ， 将 带领 读者 一 起 来 
领略 HTML 5 的 全 新 功能 。 


14 mm 


第 二 入 ”核心 技术 篇 
^4523$ HTML 5 的 整体 架构 


标记 是 HTML 页 面 中 常用 的 基本 元 素 ,， 是 HTML 页 面 的 重要 组 成 部 分 。 通 过 标记 ， 可 以 
在 网 页 实现 各 种 指定 的 显示 效果 。 本 章 将 详细 讲解 HTML 5 中 和 整体 架构 相关 的 标记 ， 并 详 
细 介 绍 这 些 标记 的 使 用 方法 。 


21 设置 网 页 头 部 元 素 


网 页 头 部 元 素 位 于 网 页 的 项 部， 用 来 设置 和 网 页 相关 的 信息 ， 例 如 页 面 标题 、 关 键 字 和 
版 权 等 信息 。 当 页 面 执行 后 ， 不 会 在 页 面 正 文中 显示 头 部 元 素 信息 。 在 HTML 5 中 ，<head> 
元 素 是 所 有 头 部 元 素 的 容器 。 位 于 <head> 内 部 的 元 素 ， 可 以 是 脚本 、 指 引 浏览 器 找到 样式 表 
和 元 信息 等 。 在 <head> 元 素 部 分 可 以 包含 如 下 标签 。 
<base> 
<link> 


<meta> 


<script> 
<style> 
<title> 


本 节 将 详细 讲解 HTML 5 中 和 头 部 元 素 相关 的 知识 。 


211 设置 文档 类 型 

文档 类 型 (DOCTYPE) 决定 了 当前 页 面 所 使 用 标记 语言 (HTML 或 XHTML) 的 版 本 ， 
合理 选择 当前 页 面 的 文档 类 型 是 设计 标准 Web 页 面 的 基础 。 只 有 定义 了 页 面 的 文档 类 型 后 ， 
页 面 里 的 标记 和 CSS 才 会 生效 。 

在 HTML 5 中 ，<!DOCTYPE> 的 声明 必须 位 于 HTMLS 文档 
<html> 标签 之 前 。 该 标签 告知 浏览 器 文档 所 使 用 的 HTML 规范 。 

对 <!IDOCTYPE> 的 声明 不 属于 HTML 标签 , 它 仅仅 是 一 条 指令 , 目的 是 告诉 浏览 器 编写 
页 面 所 用 的 标记 的 版 本 。 

在 HTML 4.01 中 ，<!DOCTYPE> 需 要 对 DTD 进行 引用 ， 因 为 HTML 4.01 基于 SGML. 
而 HIML 5 不 基于 SGML， 因 此 不 需要 对 DTD 进行 引用 ， 但 是 需要 <doctype> 来 规范 浏览 器 
的 行为 〈 让 浏览 器 按照 它们 应 该 的 方式 来 运行 )。 

在 接 下 来 的 内 容 中 ， 将 通过 一 个 具体 实例 来 讲解 HTML 头 部 元 素 的 使 用 方法 。 


D ODLDGOCD6oLU 


的 第 一 行 ， 也 就 是 位 于 


O HTML 5 开发 从 入 门 到 精通 


实例 2-1 说 — 8j 
源码 路 径 daima 2M html 
功能 介绍 HIML 头 部 元 素 的 使 用 方法 


实例 文件 1.html 的 主要 代码 如 下 。 


<!DOCTYPE HTML> 


<html> 
<head> 


<title>Title of the document</title> 


</head> 
<body> 

</body> 
</html> 


在 上 述 实例 中 实现 文档 类 型 设置 的 是 首 行 代码 ， 用 <doctype> 标 记 表 示 。 执 行 后 的 效果 如 


图 2-1 所 示 。 


从 图 2-1 的 执行 效果 可 以 看 日 
示 。 在 用 户 创建 的 任何 HTML x 
档 类 型 主要 用 于 不 同 软件 的 以 下 两 种 情况 ; 

(1) Web 浏览 器 使 用 文档 类 型 来 胡 


图 2-1 执行 效果 


8 上， 网 页 的 文档 类 型 不 是 十 分 重要 ， 不 会 在 页 面 的 正文 中 
档 的 开头 部 分 ， 都 应 该 首先 声明 文档 类 型 定义 (DTD). X 


Sj 


示 模 式 ， 在 后 面 还 将 更 详细 地 讲述 )。 
(2) 标记 校 验 器 将 检查 文档 类 型 以 确定 该 使 用 什么 规则 来 校 验 文档 在 后 面 还 将 更 详 


和 定 它 该 使 用 什么 显示 模式 来 显示 HTML 文档 (关于 


地 讲述 )。 


即使 没有 在 HTML 文档 
要 试 着 去 泻 染 不 论 是 多 么 奇怪 的 Web 文档 。 尽 管 如 此 ， 


望 它 显 示 出 来 的 样子 。 
虽然 文档 类 型 不 会 在 


网 页 中 显示 , 但 是 从 2000 年 以 后 发 布 的 多 数 浏览 器 ， 都 首先 要 碍 


声明 文档 类 型 ， 浏 览 器 还 是 要 处 理 和 显示 该 文档 。 浏 览 器 


如 果 未 在 HTML 文档 中 声明 文档 类 型 ， 则 其 在 浏览 器 中 实际 显示 出 来 的 样子 就 可 能 不 是 


所 遇 到 的 任何 HTML 文档 的 文档 类 型 , 并 使 用 文档 类 型 来 确定 编写 HTML 文档 的 人 是 否 已 


JE Web 标准 适当 地 使 用 了 HTML 和 CSS。 如 果 浏 览 器 发 现 文档 中 声明 的 文档 类 型 是 以 适当 
代码 写 入 的 ， 则 会 使 用 “标准 模式 ”来 显示 网 页 。 媚 


规范 来 显示 网 页 ， 也 就 是 说 ， 如 果 浏 览 


16 BH 


器 信任 编写 网 页 的 人 ， 就 会 按 编 写 网 页 的 人 希望 的 


显 


细 


E 
Tf 


于 存在 所 谓 的 “文档 类 型 转换 ” 


希 


看 
根 
的 


E“ 标 准 模式 ”下 ， 浏 览 器 一 般 会 根据 CSS 


样 
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子 显示 网 页 。 


a 

O 过 渡 性 文档 类 型 : 要 求 不 严格 ， 允 许 使 用 HTML 4.01 标识 。 

口 严格 的 文档 类 型 : ps sss 
口 框架 性 文档 类 型 : 是 专门 针对 框架 页 面 所 使 用 的 文档 类 型 。 

而 在 HIML 5 中 只 有 一 个 : 


<!DOCTYPE HTML> 


2.1.2 ”设置 所 有 链接 规定 默认 地 址 或 默认 目标 

在 HTML 5 中 , 使 用 <base> 标 签 可 以 为 页 面 上 的 所 有 链接 规定 默认 地 址 或 默认 目标 。 
在 通常 情况 下 ， 浏 览 器 会 从 当前 文档 的 URL 中 提取 相应 的 元 素来 填写 相对 URL 中 的 空 
白 。 使 用 <base> 标 签 可 以 改变 这 一 点 ， 浏 览 器 随后 将 不 再 使 用 当前 文档 的 URL， 而 使 用 
指定 的 基本 URL 来 解析 所 有 的 相对 URL。 这 其 中 包括 <a>、<img>、<link>、<form> 标 
签 中 的 URL. 

在 HIML 5 中 规定 ， 必 须 将 <base> 标 签 用 在 <head> 元 素 内 部 。 例 如 假设 图 像 的 绝对 地 
址 是 : 


«img src-"http://www.topchuban001 .com/i/pic.gif" /> 


接 下 来 在 页 面 中 的 <head> 元 素 部 分 插入 <base> 标 签 ， 规 定 页 面 中 所 有 链接 的 基准 URL: 


<head> 
<base href-"http://www.topchuban001.com/i/" /> 
</head> 


这 样 当 在 页 面 上 插入 图 像 时 ， 用 户 必须 规定 相对 的 地 址 ， 浏 览 器 会 寻找 文件 所 使 用 的 完 
整 URL: 


«img src="pic.gif" /> 


注意 : 在 一 个 文档 中 ， 最 多 能 使 用 一 个 <base> 元 素 。 建 议 把 <base> 标 签 排 在 <head> 元 素 
中 第 一 个 元 素 的 位 置 ， 这 样 <head> 中 其 他 元 素 就 可 以 利用 <base> 元 素 中 的 信息 了 。 


2.1.3 ”链接 标签 
ft HTML 5 中 ，<link> 标签 用 于 定义 文档 与 外 部 资源 之 间 的 关系 。 例 如 用 下 面 的 代码 可 
以 链接 到 一 个 名 为 “style.css” 的 外 部 样式 表 。 


<head> 
<link rel="stylesheet" type="text/css" href-"style.css" /> 
</head> 


虽然 目前 所 有 的 主流 浏览 器 都 支持 <link> 标 签 ， 但 是 <link> 标 签 在 HTMLS 中 不 再 支持 
EN 17 
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HTML 4.01 的 某 些 属性 。 其 中 "sizes" 是 HTMLS 中 的 新 届 性 ,， HTMLS 中 的 新 属性 如 表 2-1 所 示 。 
表 2-1 HTML, 中 的 新 属性 
属 性 值 do x 
charset char encoding HTMLS 中 不 支持 
href URL 规定 被 链接 文档 的 位 置 
hreflang language_code 规定 被 链接 文档 中 文本 的 语言 
media media_query 规定 被 链接 文档 将 被 显示 在 什么 设备 上 
alternate 
author 
help 
icon 
licence 
Dext 
rel pingback 规定 当前 文档 与 被 链接 文档 之 间 的 关系 
prefetch 
prev 
search 
sidebar 
stylesheet 
tag 
rev reversed relationship HTML5 中 不 支持 
heightxwidth 见 定 被 链接 资源 仅 适 用 于 rel="icon" 
Sizes any 规定 被 链接 资源 的 尺寸 。 仪 适 rel="icon 
blank 
self 
target top HTML5 中 不 支持 
_parent 
frame name 
type MIME type 规定 被 链接 文档 的 MIME 类 型 
f H«link» 标签 支持 HTML 5 中 如 表 2-2 所 示 的 全 局 属性 。 
表 2-2 HTML 5 中 新 的 全 局 属性 
属 性 Ju 述 
accesskey JU US n 76 TT RH E e 
class 纲 定 元 素 的 类 名 《〈 用 于 规定 样式 表 中 的 类 ) 
contenteditable 纲 定 是 否 允 许 用 户 编辑 内 容 
contextmenu WERA E FOE 
dir 纲 定 元 素 中 内 容 的 文本 方向 
draggable 纲 定 是 否 允 许 用 户 拖 动 元 素 
dropzone 纲 定 当 被 拖 动 的 项 目 /数据 被 拖 放 到 元 素 中 时 会 发 生 什么 
hidden 纲 定 该 元 素 是 无 关 的 。 被 隐藏 的 元 素 不 会 显示 
id 纲 定 元 素 的 唯一 ID 
lang 纲 定 元 素 中 内 容 的 语言 代码 
spellcheck 纲 定 是 否 必须 对 元 素 进行 拼写 或 语法 检查 
style 纲 定 元 素 的 行内 样式 
tabindex MEJAH tab 键 控制 次 序 
title WER SU = BALBUS Ps 3. 
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21.4 ”设置 有 关 页 面 的 元 信息 

Æ HTML 5 中， 可 以 使 用 <meta> 标 签 设 置 有 关 页 面 的 元 信息 (meta-information )， 比 如 针 
对 搜索 引擎 和 更 新 频 度 的 描述 和 关键 词 。<meta> 标签 位 于 文档 的 头 部 ,在 里 面 不 包含 任何 内 
容 。<meta> 标签 的 属性 定义 了 与 文档 相关 联 的 “名 称 / 值 ” 对 。 

在 HTML 5 中 ， 不 再 支持 属性 “scheme”。 但 是 在 HTML 5 中 ， 增 加 了 一 个 新 的 
“charset”， 此 属性 可 以 使 字符 集 的 定义 更 加 容易 。 在 HTML 4.01 中 必须 用 如 下 写法 : 


性 : 


Hl 


<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 


而 在 HTML 5 中 只 需 用 如 下 写法 即 可 实现 相同 的 功能 


<meta charset="ISO-8859-1"> 
例如 通过 下 面 的 代码 定义 了 针对 搜索 引擎 的 关键 词 : 
«meta name-"keywords" content="HTML, CSS, XML, XHTML, JavaScript" /> 


通过 下 面 的 代码 定义 了 对 页 面 的 描述 : 


«meta name="description" content=" 欢 迎 学 习 web 技术 " /> 


通过 下 面 的 代码 定义 了 页 面 的 最 新 版 本 : 


Ë 


«meta name-"revised" content-"David, 2012/12/8/" /> 


新 一 次 页 面 : 


Hk 


通过 下 面 的 代码 可 以 设置 每 5 plo 


«meta http-equiv="refresh" content="5" /> 


注意 要 性 

<meta> 标 签 用 ase HTML 网 页 文档 的 属性 ， 例 如 作者 、 日 期 和 时 间 、 网 
关键 词 、 页 面 刷 新 等 。 在 有 关 搜 索引 擎 注册 、 搜 索引 擎 优化 排名 等 网 络 营销 方法 内 容 中 ， 
常 都 要 谈论 <meta> 标 签 的 作用 。<meta> 标 签 的 内 容 设计 对 于 搜索 引擎 营销 来 说 是 至 ds 
因素 ， 尤 其 是 其 中 的 “description”( 网 页 描述 ) 4e "Keywords? ( 关键 词 ) 两 个 属性 更 为 重要 。 
尽管 现在 的 搜索 引擎 检索 信息 的 决定 和 搜索 结果 的 排名 很 少 依赖 META 标签 中 的 内 容 ， 但 
<meta> 标 签 的 内 容 设计 仍然 是 很 重要 的 。 

一 段 代码 中 有 3 个 爹 有 <meta> 的 地 方 ， 并 且 <meta> 并 不 是 独立 存在 的 ， 而 是 要 在 后 面 连 
接 其 他 的 属性 ， 如 iM Keywords、http-equiv” 等 。 在 搜索 引擎 营销 中 常见 的 <meta> 
标签 有 如 下 两 个 。 

(1) <meta> 标 签 中 的 HTTP-EQUIV 

例如 ，HTML 代码 实例 中 有 如 下 一 项 内 容 。 


38 2n 


«meta http-equiv-"Content-Type" content-"text/html; charset-gb2312" 


其 作用 是 指定 了 当前 文档 所 使 用 的 字符 编码 为 “gb2312”， 也 就 是 中 文 简 体 字符 。 根 据 这 
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一 行 代码 ， 浏 览 器 就 可 以 识别 出 这 个 网 页 应 该 用 中 文 简体 字符 显示 。 类 似 地 ， 如 果 将 
“gb2312” 替 换 为 “big$”， 就 是 中 文 繁体 字符 了 。 

http-equiv 用 于 向 浏览 器 提供 一 些 说 明 信 息 ， 从 而 可 以 根据 这 些 说 明 做 出 相应 操作 。 
http-equiv 其 实 并 不 仅仅 只 有 说 明 网 页 的 字符 编码 这 一 个 作用 ， 常 用 的 http-equiv 类 型 还 包括 : 
网 页 到 期 时 间 、 默 认 的 脚本 语言 、 默 认 的 风格 页 语言 、 网 页 自动 刷新 时 间 等 。 

(2) <meta> 标 签 中 的 "Keywords" 

与 <meta> 标 签 中 的 "description" 类 似 ，"Keywords" 也 是 用 来 描述 一 个 网 页 的 属性 的 ， 只 不 
过 要 列 出 的 内 容 是 “关键 词 "， 而 不 是 网 页 的 介绍 。 这 就 意味 着 ， 要 根据 网 页 的 主题 和 内 容 选 
择 合适 的 关键 词 。 在 选择 关键 词 时 ， 除 了 要 考虑 与 网 页 核心 内 容 相 关 之 外 ， 还 应 该 是 用 户 易 
于 通过 搜索 引擎 检索 的 ， 过 于 生僻 的 词汇 不 太 适 合 做 <meta> 标 签 中 的 关键 词 。 关 于 <meta> 标 
签 中 关键 词 的 设计 ， 要 注意 不 要 堆砌 过 多 的 关键 词 ， 罗 列 大 量 关键 词 对 于 搜索 引擎 检索 没有 
太 大 的 意义 ， 对 于 一 些 热 门 的 领域 (同类 网 站 数量 较 多 的 领域 )， 甚 至 可 能 起 到 副作用 。 


注意 一 一 撰写 网 站 关键 词 的 技巧 
网 页 关键 词 十 分 重要 ， 要 想 让 搜索 引擎 能 够 找到 用 户 的 网 页 ， 必 须 合 理 、 科 学 地 设置 网 
页 关键 词 。 在 使 用 网 页 关键 词 时 ， 可 能 很 多 人 会 遇 到 如 下 问题 。 
网 站 一 些 关键 词 排名 不 错 ， 但 是 点 击 访问 的 不 多 ， 曾 调查 发 现 有 时 候 排 名 靠 前 的 访问 量 
比 靠 后 的 点 击 率 更 低 ， 有 些 网 站 访问 量 很 高， 但 是 网 站 广告 的 点 击 率 很 低 ， 产 品 销售 型 网 站 
也 会 同样 遇 到 这 种 ， 高 访问 量 ， 低 咨询 ， 低 成 交 量 的 问题 。 
网 站 如 何 获得 真正 高 质量 的 流量 ， 真 正 帮 企业 从 网 上 获得 订单 呢 ? 根据 以 往 的 经 验 ， 并 
参考 众多 网 友 的 研究 数据 ， 发 现 网 页 标题 和 网 页 描述 是 吸引 用 户 点 击 你 的 网 站 或 吸引 产品 潜 
在 客户 点 击 网 站 的 直接 原因 。 比 如 ， 用 户 在 搜索 引擎 中 搜索 一 个 关键 词 ， 查 看 结果 时 ， 通 常 
都 是 看 结果 中 的 标题 ， 以 及 标题 下 面 的 文字 描述 内 容 ， 通 过 这 么 简单 的 一 个 下 意识 的 操作 ， 
筛选 搜索 结果 ， 并 点 击 自 认 为 跟 自 己 所 寻找 目标 相符 的 网 站 。 因 此 ， 为 每 一 个 网 页 或 网 站 撰 
写 关 键 词 非常 重要 。 

标题 描述 撰写 原则 如 下 。 

(1) 准确 规范 ， 主 题 明确 ; 

(2) HAHA, THER, RAE 20 个 字 内 搞定 ; 

(3) 突出 与 关键 词 的 相关 性 ， 如 直接 用 关键 词 做 标题 或 标题 中 包含 关键 词 ; 突出 实效 性 ， 
如 促销 打折 ， 节 假日 活动 等 ; 

(4) 强调 所 提供 的 产品 或 服务 的 优势 、 独 特性 、 专 业 型 。 


2.1.5 ”定义 客户 端 脚 本 
在 HTML 5 中 ，<script> 标签 用 于 定义 客户 端 脚本 ， 比 如 JavaScript。<scrip 亿 元素 既 可 
包含 脚本 语句 ， 也 可 以 通过 "sre" 属 性 指向 外 部 脚本 文件 。JavaScript 通常 用 于 图 像 操作 、 表 单 
验证 以 及 动态 内 容 更 改 。 
例如 ， 通 过 下 面 的 JavaScript 代码 可 以 在 页 面 中 输出 文字 "Hello world!": 


«script type="text/javascript"> 


20 m 


document.write("Hello World!") 


</script> 


在 HTML4 中 , 属性 "type" 是 必需 的 要 素 , 而 在 HTML 5 H 
标签 在 HTML 5 H 


属性 。 


如 果 使 用 "src" 


E 


E: 


[ES 


新 增 了 "async" 属 
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B PE, Wl] <script> 7625 4^ 201 


是 空 的 。 


脚本 的 方法 。 具 体 说 明 如 下 。 

(1) 如 果 async-"async": 脚本 相对 于 页 面 的 其 余部 
时 ， 脚 本 将 被 执行 )。 

(2) 如 果 不 使 用 async H. defer-"defer": 

(3) 如 果 既 不 使 用 async 也 不 使 用 defer: 在 浏览 器 继 乡 
行 脚 本 。 


Æ HTML S5 à, «script? 标签 支持 的 局 


=: 


E 
ES] 


性 如 表 2-3 所 示 。 


分 异步 地 执行 ( 当 


PF 是 可 选 的 要 素 。 男 外 , <script> 
了 在 HTML5 中 不 再 支持 HTML 401 中 的 某 些 


实在 HTML 5 中 有 多 种 执行 外 部 


续 进行 解析 


页 面 继 


脚本 将 在 页 面 完 成 解析 时 执行 


Sc f pr UTR 


前 ， 立 即 读 取 并 执 


表 2-3 HTMLS 中 的 新 属性 
属 性 值 fü R 
async async 规定 异步 执行 脚本 《〈 仅 适用 于 外 部 脚本 ) 
defer defer 规定 当 页 面 已 完成 解析 后 ， 执 行 脚本 〔 仅 适用 于 外 部 脚本 》) 
type MIME type 规定 脚本 的 MIME 类 型 
charset character set 规定 在 脚本 中 使 用 的 字符 编码 〈 仅 适用 于 外 部 脚本 ) 
src URL 规定 外 部 脚本 的 URL 


2.1.6 定义 HTML 文档 的 样式 信息 


在 HIML 5 中 ， 可 以 使 用 <style> 标 签 定 义 HTML 文档 的 样式 信息 。 通 过 <style> 标 签 ， 可 
以 设置 HTML 元 素 如 何在 浏览 器 中 呈现 。 例 如 在 下 面 的 实例 中 ， 演示 了 在 HTML 文档 中 使 
用 <style> 元 素 的 方法 。 
实例 2-2 说 ] 
源码 路 径 daima\2\2.html 
功能 演示 了 在 HIML 文档 中 使 用 style 元 素 的 方法 


实例 文件 2.html 的 主要 代码 如 下 。 


<html> 
<head> 


«style type="text/css"> 
hl {color:red} 
p {color:blue} 


</style> 
</head> 


<body> 
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<hl>Header-1</h1> 
<p> 看 我 的 样式 </p> 
</body> 

</html> 


执行 后 的 效果 如 图 2-2 所 示 。 


9 - e][8i- s 2] e - J| f]. à] i 
Header-1 


看 我 的 样式 


图 2-2 执行 效果 

属性 "scoped" 是 HTML 5 中 的 一 个 新 属性 ， 它 允许 用 户 为 文档 的 指定 部 分 定义 样式 ， 而 
是 整个 文档 。 如 果 使 用 了 属性 "scoped"， 那 么 所 规定 的 样式 只 能 应 用 到 <style> 元 素 的 父 元 素 
其 子 元 素 。 


kd > 


注意 : 如 果 未 定义 "scoped" 属 性 ,那么 <style> 元 素 必 须 位 于 <head> 部 分 中 。 如 需 链 接 
外 部 样式 表 ， 请 使 用 <link> 标签 。 


2.1.7 设置 页 面 标题 

设计 的 网 页 需要 有 一 个 题目 ， 和 其 他 题目 一 样 ， 这 个 标题 需要 高 度 概 括 这 个 页 面 的 内 容 。 
设置 后 的 标题 不 在 浏览 器 正文 中 显示 , 而 在 浏览 器 的 标题 栏 中 显示 ,在 HTML 5 中 ,使 用 <title> 
标签 定义 文档 的 标题 。<title> 元 素 在 所 有 HTML 文档 中 是 必需 有 的 。 

在 页 面 中 定义 页 面 标题 的 代码 如 下 。 


<title> 页 面 标题 </title> 


在 接 下 来 的 内 容 中 ， 将 通过 一 个 具体 实例 来 讲解 设置 页 面 标题 的 方法 。 


实例 2-3 j — HJ 
源码 路 径 daima\2\3.html 
功能 介绍 设置 页 面 标题 的 方法 


实例 文件 3.html 的 主要 代码 如 下 。 


<html> 
<head> 
<title> 这 里 是 我 的 标题 </title> 
</head> 


<body> 

</body> 

</html> 
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执行 后 的 效果 如 图 2-3 所 示 。 — maes 
目前 所 有 的 主流 浏览 器 都 支持 <title> 标签 。 网 页 标 wao seo sso PrO PED IAV Wh. 
题 和 一 本 书 的 书 名 一 样 ， 是 这 本 书 所 讲 内 容 的 高 度 概括 。 9 es] es 
读者 在 看 一 本 书 的 时 候 最 先 判断 其 所 讲 内 容 也 是 从 标题 
手 的 。 同 样 的 道理 ， 搜 索引 擎 了 解 一 个 网 页 内 容 也 是 从 
标题 入 手 的 。 搜 索引 擎 读 到 一 个 网 页 的 第 一 部 分 内 容 就 是 


标题 。 


注意 一 一 网 页 标题 的 重要 性 o 

给 网 页 加 上 标题 后 , 会 给 浏览 网 页 者 带 来 方便 。 另外 ， s s T 
搜索 引擎 的 搜索 结果 也 是 页 面 的 标题 。 由 此 可 见 ，HTML 页 面 中 的 标题 是 十 分 重要 的 。title 
标签 对 于 提高 网 站 的 排名 起 到 非常 重要 的 作用 。 尽 管 如 此 ， 有 很 多 人 对 于 怎样 去 构造 一 个 合 
i$ 44 title 还 不 是 很 清楚 。 

网 页 标题 是 目前 公认 的 影响 排名 的 最 重要 因素 之 一 。 标 题 诠释 一 个 网 页 “是 什么 2，“ 关 
于 什么 ”。 是 帮助 搜索 引擎 判断 一 个 网 页 内 容 的 第 一 因素 。 


22 ”设置 页 面 正 文 


页 面 的 正文 是 网 页 的 主体 ， 通 过 正文 可 以 向 浏览 者 展示 页 面 的 基本 信息 。 正 文 定 义 了 网 
页 上 显示 的 主要 内 容 与 显示 格式 ， 是 整个 网 页 的 核心 。 在 HTML 5 中 设置 正文 的 标记 是 
“<body>..</body>”。 其 具体 使 用 的 语法 格式 如 下 。 


<body> 页 面 正文 内 容 </body> 


页 面 正 文 位 于 头 部 之 后 ,“<body>” 标 示 正 文 的 开始 ,“</body>” 标 示 正 文 的 结束 。 正 文 
body 通过 其 本 身 的 属性 实现 指定 的 显示 效果 ，body 的 常用 属性 如 表 2-4 所 示 。 
表 2-4 body 常用 属性 列表 


B 性 dH fi x 
background 设置 页 面 的 背景 图 像 
bgcolor 设置 页 面 的 背景 颜色 
text 设置 页 面 内 文本 的 颜色 


vlink 设置 页 面 内 已 经 被 访问 过 的 链接 颜色 
alink 设置 页 面 内 链接 被 访问 时 的 颜色 
"body" 属 性 中 的 颜色 取 值 既 可 以 是 表示 颜色 的 英文 字符 ， 例 如 “red”( 红 色 )， 也 可 以 是 
十 六 进 制 颜色 值 ， 例 如 “#9900FF”。 
在 接 下 来 的 内 容 中 ， 将 通过 一 个 具体 实例 来 讲解 设置 网 页 正文 的 方法 。 


置 
置 
置 
link 设置 页 面 内 未 被 访问 过 的 链接 颜色 
置 
置 


实例 2-4 jog 
源码 路 径 daima\2\4.html 
功能 设置 网 页 的 正文 
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HTML 5 开发 从 入 门 到 精通 
实例 文件 4.html 的 主要 代码 如 下 。 


<html> 
<head> 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 无 标题 文档 </title> 


</head> 
<body> 


</body> 
</html> 


面 中 显示 。 


和 前 面 介绍 的 头 部 元 素 不 同 ， 正 文 


容 的 <body> 部 分 将 直接 ! 


看 这 页 面 效果 吧 


在 网 页 设计 中 起 疹 


SX 


在 开始 编写 


页 面 的 背景 色 、 背 景 图 案 
表 2-4 内 指定 参数 来 设置 。 
要 想 在 正文 中 4 
要 的 内 容 。 例 如 ， 想 在 网 页 正文 


<html> 
<head> 


执行 后 的 效果 如 图 2-4 所 示 ， 从 显示 效果 中 可 以 看 出 ， 页 面 正文 内 容 将 在 浏览 器 主体 界 


言 县 将 在 页 面 的 主题 位 置 显示 出 来 。 作 为 网 页 主体 内 


ZW 前 景 (文字 ) 色 、 


显示 在 浏览 器 的 窗口 中 ， 它 里 面 的 内 容 直 接 影响 着 整个 网 页 的 好 坏 ， 
EE 要 的 作用 。 
4 体 页 面 内 容 之 前 ， 我 们 需要 对 页 面 进行 整体 的 基本 规划 和 设置 ， 例 如 整个 
页 面 左 /上 边 距 大 小 等 等 。 TE HTML 中 ， 需 要 用 


显示 不 同 的 文本 内 容 , 可 以 直接 在 代码 中 的 <body></body> 标 记 之 间 输 入 需 
PF 显 示 “ 这 是 正文 ”四 个 字 ， 可 以 通过 下 面 的 代码 实现 。 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 无 标题 文档 </title> 


) 无 标题 文档 - Horilla Firefox i -|D| x| 


</head> 
<body> 
这 是 正文 
</body> 
</html> 
此 时 的 执行 效果 如 图 2-5 所 示 。 
zoi 
rO ”编辑 区 ) SEV 历史 (8) 书签 @) IA «B» 
exem SINE m 
€ 3 Q9 e|g- 8| -| fti ex 
看 这 页 面 效 果 吧 


图 2-4 执行 效果 
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XQ) REO SEV 历史 (8) SEG IAU SB 


图 2-5 执行 效果 


823 HTML 5 的 整体 架构 “ 


2.9 注释 是 一 种 说 明 
注释 是 编程 语言 和 标记 语言 中 不 可 缺少 的 要 素 。 通 过 注释 不 但 可 以 方便 用 户 对 代码 的 理 
解 ， 并 且 便 于 系统 程序 的 后 续 维 护 。 在 HTML 中 插入 注释 的 如 下 语法 格式 。 

<!-- 注 释 内 容 --> 


下 面 将 通过 一 个 具体 实例 讲解 为 网 页 添加 注释 的 方法 。 


实例 2-5 说 明 
源码 路 径 daima 2 5.html 
功能 为 实例 2-4 中 的 网 页 4.html 添加 注释 


实例 文件 5.html 的 主要 代码 如 下 所 示 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 无 标题 文档 </title> 

</head> 

<body> 

看 这 页 面 效 果 吧 ”<!-- 页 面 正 文 内 容 --> 

</body> 

</html> 


执行 效果 如 图 2-6 所 示 。 ie. o emeei 
要 输入 注释 信息 ， 首 先 输入 一 个 小 于 号 “<” 然后 。 看 这 页 面 效果 吧 
紧 接着 输入 一 个 感叹 号 “!1”， 要 注意 的 是 ， 在 小 于 号 和 
感叹 号 之 间 不 能 有 空格 ， 之 后 是 两 条 短线 “--”。 
接 下 来 输入 用 户 需 要 的 注释 或 说 明 信 息 ， 写 完 注释 
信息 后 ， 再 输入 两 条 短线 “--” 和 一 个 大 于 号 “>” 这 
样 就 完成 了 一 个 注释 信息 的 添加 。 例 如 下 面 的 格式 : 图 2-6 执行 效果 


<!--This is a comment--> 


在 此 需要 注意 的 是 ， 因 为 两 条 短线 “--” 和 和 一 个 大 于 号 “>” 是 用 来 表示 注释 的 终止 ， 所 
以 不 要 在 注释 的 内 容 中 加 入 字符 串 “-->”。 


24 和 页 面 结 构 相 关 的 新 元 素 


在 全 新 的 HTML 5 中 ， 新 增 了 几 个 和 页 面 结构 相关 的 新 元 素 。 在 本 节 的 内 容 中 ， 将 重点 
讲解 这 几 个 新 元 素 的 基本 知识 ， 为 读者 步 入 本 书后 面 知识 的 学 习 打 下 基础 。 
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O HTML 5 开发 从 入 门 到 精通 


2.4.1 定义 区 段 的 标签 


在 全 


DU. 9 


PHI HTML 5 中 ，<section> 标签 用 于 定义 文档 中 的 节 〈section、 区 段 )， 例 如 章节 、 
脚 或 文档 中 的 其 他 部 分 。 例 如 通过 下 面 的 代码 在 页 面 中 定义 了 一 个 区 域 : 
<section> 
<h1>PRC</h1> 
<p> 中 华人 民 共 和 国 万 岁 </p> 
</section> 


«section» 标签 是 HTML 5 中 的 新 标签 ， 其 属性 cite 的 值 为 URL， 此 值 表示 <section> 的 


URL. <s 


ection> 标签 支持 本 章 前 面 表 2-2 中 列 出 的 HTML 5 中 的 全 局 属性 。 


2.4.2 ”定义 独立 内 容 的 标签 


在 HTML 5 中 ， 使 用 <article> 标 签 可 以 定义 独立 的 页 面 内 容 。 通 党 在 如 下 场合 


L 


使 用 


<article> 标 签 。 


B 
"E, 


坛 帖子 
民 纸 文章 


口 博客 条 目 


a A 
在 接 下 来 的 内 容 


上 户 评论 


各 通过 一 个 具体 实例 讲解 在 网 页 中 使 用 <article> 标 签 的 方法 。 


L 
AL 
N 


实例 2-6 说 Jj 


源码 路 径 daima 2 6.html 


功能 在 网 页 中 使 用 <article> 标 签 


实例 文件 6.html 的 主要 代码 如 下 。 


<IDOCTYPE HTML- 

<html> 

<body> 

<article> 

<a href="http://www.apple.com">iphone</a><br /> 

公元 2012 年 9 月 ， 全 新 一 代 的 iPhone 5 发 布 ， 首 先 登录 美国 市 场 ， 然 后 欧洲 七 国 ..…. 


</article> 


</body> 
</html> 


执行 效果 如 图 2-7 所 示 。 
<article> 标签 的 内 容 独 立 于 文档 的 其 余部 分 ，<article> 标签 支持 本 章 前 面 表 2-2 中 列 出 
ff] HTML 5 中 的 全 局 属性 。 
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= ID] >i 
XO REO SEV PRO 书签 @) IA #RBQ 
< [Pnn | [四 百 度 搜 索 ww | Comi 5 ae] file x [C] 
@ - c|(&l- s ]|& lie | & | S -| et - 
iphone 
公元 2012 年 9 月 ， 全 新 一 代 的 iPhone 5 发 布 ， 首 先 登录 美国 市 场 
PIHEBI...... 


图 2-7 执行 效果 


243 ”定义 导航 链接 标签 


在 全 新 的 HTML 5 中 ，<nav> 标 签 用 于 定义 导航 链接 的 部 分 。 在 接 下 来 的 内 容 中 ,将 通过 


HTML 5 的 整体 架构 


一 个 具体 实例 讲解 在 网 页 中 使 用 <nav> 标 签 的 方法 。 
实例 2-7 说 明 
源码 路 径 daima\2\7.html 
功能 在 网 页 中 使 用 <nav> 标 签 


实例 文件 7.html 的 主要 代码 如 下 。 
<!DOCTYPE HTML» 


<html> 
<body> 


<nav> 


<a href="index.asp"> 主 页 </a> 
<a href="chanpin.asp"> 产 品 </a> 
<a hre 人 "news.asp"> 新 闻 </a> 


</nav> 
</body> 
</html> 


执行 效果 如 图 


2-8 所 示 。 


如 果 在 文档 中 有 “前 后 ”按钮 则 应 该 把 它 放 到 <nav> 元 素 ! 


«nav» 标签 支持 本 章 前 面 表 2-2 PAH 


HE HTML 5 中 的 全 


局 属性 。 


2.4.4 ”定义 其 所 处 内 容 之 外 的 内 容 


= ID| x| 


J)Nozilla Firefox 
XQ) REO ZEV PLO 书签 


|f jam [SET hm |E 
|o c |m- s pj e 


主页 产品 新 闻 


在 HIML 5 中 ，<aside> 标签 用 于 定义 其 所 处 内 容 之 外 的 内 容 。 
下 面 将 通过 一 个 具体 实例 讲解 在 网 页 中 使 用 <aside> 标 签 的 方法 。 图 2-8 执行 效果 
实例 2-8 说 gj 
源码 路 径 daima 2 8.html 
功能 在 网 页 中 使 用 <aside> 标 签 


实例 文件 8.html 的 主要 代码 如 下 。 


<!DOCTYPE HTML> 


<html> 
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<body> 


<p>AAAAAAA.</p> 
<aside> 
<h4>BBBBBB</h4> 
TCCCCCCCCCCCCC. 
</aside> 


</body> 
</html> 


执行 效果 如 图 2-9 所 示 。 

«aside» 的 内 容 可 用 作文 章 的 侧 栏 ， <aside> 标签 支持 本 章 前 
面 表 2-2 中 列 出 的 HTML5 中 的 全 局 属性 。 
2.4.5 ”定义 页 脚 内 容 的 标签 


在 HTML 5 中 ,<footer> 标签 用 于 定义 <section> 或 <document> 
的 页 脚 。 下 面 通 过 一 个 具体 实例 讲解 在 网 页 中 使 用 <footer> 标 签 的 
方法 。 


TT ox 
THO RU SEV PREO 书签 ( 


(Pomin | 加 百度 搜索 nn |n 
@ -cj[ss^j e 


BAAAAAAA, 


BBBBBB 


图 2-9 执行 效果 


实例 2-9 说 HJ 
源码 路 径 daima 2 9.html 
功能 在 网 页 中 使 用 <footer> 标 签 


实例 文件 9.html 的 主要 代码 如 下 。 
«IDOCTYPE HTML» 
<html> 


<body> 
<footer> 这 是 页 脚 部 分 的 内 容 .</footer> 


</body> 
</html> 


执行 效果 如 图 2-10 所 示 。 


[Daozill Firefox BE 
X) SBO SEV PLO BE 


| @ MEN [SEES IT, 
Q^ -ecj3-85| 9| 


图 2-10 执行 效果 


假如 用 户 使 用 <footer> 来 插入 联系 信息 ， 应 该 在 <footer> 元 素 内 使 用 <address> 元 素 。 


<footer> 标签 支持 本 章 前 面 表 2-2 中 列 出 的 HIML 5 中 的 全 局 属性 
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° 


BPI WERA 


HTML 5 新 增加 了 很 多 新 的 标记 元 素 ， 通 过 这 些 新 的 标记 元 素 可 以 实现 以 往 HTML 所 不 
能 实现 的 功能 。 本 章 将 引领 读者 一 起 学 习 HTML 5 中 基本 页 面 元 素 的 使 用 技巧 。 


31 在 页 面 中 输出 一 段 文字 


在 HIML 5 网 页 中 ， 可 以 使 用 传统 的 HTML 段落 标记 <p></p> 来 实现 段落 文字 功能 。 下 
面 将 通过 一 个 实例 ， 讲 解 在 页 面 中 输出 一 段 文字 的 方法 。 


实例 3-1 a F 
源码 路 径 daima\3\1.html 
功能 在 页 面 中 输出 一 段 文字 


实例 文件 1.html 的 实现 代码 如 下 。 


<!DOCTYPE HTML> 

<META charset="utf-8"> 

<TITLE> 我 的 第 一 个 HIML 5 页 面 </TITLE> 
<P> 欢 迎 学 习 HTML 5</P> 


通过 短 短 的 几 行 代码 就 完成 了 一 个 页 面 的 开发 ， 这 充分 说 明了 HTML 5 语法 的 简洁 性 。 
同时 HTML 5 并 不 是 一 种 XML 语言 ， 其 语法 非常 随意 。 上 述 程序 中 的 第 一 行 代码 如 下 : 


4 


<! DOCTYPE HTML- 


通过 上 述 几 个 简短 字符 ， 甚 至 不 包括 版 本 号 ， 就 能 够 告诉 浏览 器 需要 一 个 <doctype> 标 签 
来 触发 标准 模式 。 接 下 来 ， 我 们 需要 说 明文 档 的 字符 编码 ， 否 则 将 出 现 浏览 器 不 能 正确 解析 ， 
会 导致 安全 隐患 ， 为 此 加 入 如 下 一 行 代码 : 


<META charset="utf-8"> 


"Om 


通过 上 述 代码 指明 了 该 文档 的 字符 编码 。 另 外 ， 因 为 HTML 5 不 区 分 字母 大 小 写 、 标 记 
结束 符 及 属性 是 否 加 引号 ， 所 以 如 下 3 行 代码 是 完全 等 效 的 : 


«meta charset="utf-8"> 
<META charset="utf-8" /> 
<META charset=utf-8> 


Æ HTML 5 的 主体 代码 中 ， 可 以 省 略 <html> 与 <body> 标 记 ， 用 户 可 以 直接 编写 需要 显示 


O HTML 5 开发 从 入 门 到 精通 
的 内 容 。 代 码 如 下 ; 
<P> 欢 迎 学 习 HTML 5</P> 


虽然 在 编写 代码 时 省 略 了 <html> 与 <body> 标 记 , 但 在 浏览 器 进行 解析 时 会 自动 进行 添加 。 
终 的 执行 效果 如 图 3-1 所 示 。 
| ^ 我 的 第 一 个 THL S 页 面 ~ morilla Firefos Te E 


XFO MEO SEV MRO HEO IRO hoc 
站 } 我 的 第 一 个 HTML 5 页 面 + 


9 c |ë 8| 9 | f à x 


欢迎 学 习 HINL 5 


图 3-1 执行 效果 


3.2. ”对 页 面 进行 分 栏 设计 


在 大 多 数 情况 下 ， 设 计 师 们 通常 会 对 如 下 三 部 分 进行 规划 : 

O 上 部 分 : 显示 导航 。 

口 中 部 分 :又 分 成 两 个 部 分 ， 其 中 左边 设置 莱 

OQ 下 部 分 : 显示 页 面 版 权 信息 。 

在 接 下 来 的 内 容 中 ， 将 通过 一 个 具体 实例 讲解 使 用 HTML 5 新 元 素 对 页 面 进行 分 栏 设 计 
的 方法 。 


右边 显示 文本 内 容 。 


实例 3-2 说 HJ 
源码 路 径 daima\3\2.html 
功能 使 用 HTML 5 的 新 元 素 对 页 面 进行 分 栏 设计 


实例 文件 2.html 的 具体 代码 如 下 。 


<!DOCTYPE html> 

<head> 

<meta charset=utf-8> 

<title> 页 面 结构 </title> 

«style type="text/css"> 
header,nav,article,footer 
{border:solid 1px 7666;padding:5px] 
header(width:500pxj 
nav (float:left;width:60px;height: 1 00px 
article (float:left;width:428px;height:100px 
footer (clear:both;width:500px) 

</style> 

</head> 
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<body> 

«header class="bgColor"> 导 航 部 分 </header> 
<nav> 菜 单 部 分 </nav> 

<article> 内 容 部 分 </article> 

<footer> 底 部 说 明 部 分 </footer> 

</body> 

</html> 


在 上 述 代 码 中 ， 使 用 HTML 5 的 全 新 元 素 对 页 面 进 行 分 栏 设 计 ， 执 行 后 的 效果 如 图 3-2 


所 示 。 


其 实 对 


页 面 结 构 - mozilla Firefox = D| xi 
IEEE le] 
D fileu Q el[&l-s€ ][&|-|f| e) S] l 
导航 部 分 


底部 说 明 部 分 


图 3-2 分 栏 效果 


改 ， 也 可 以 实现 上 述 分 栏 效 果 。 具 体 代码 如 下 。 


<!DOCTYPE html PUBLIC n //W3C//DTD XHTML 1.0 Transitional//EN" — "http://www.w3.org/ 


TR/xhtmll/DTD/xhtmll - transitional.dtd" > 

«html — xmins-"http://www.w3. org/199 9/xhtml”> 
<head> 

«meta http-equiv="Content-Type" content-"text/html; charset-utf-8" / > 
<title> 页 面 结构 Utitle> 

«style type="text/css"> 

#header, ZsiderLeft, ZsiderRight, #footer 
(border:solid — lpx #666; padding: 5px) 
header ( width:500px) 

ZsiderLeft( float:left;width:6 Opx; height:10 Opx) 
ZsiderRightí float:left; width:428px; height:10 Opx) 
#footer( clear:both; width: 500px) 

</style> 

</head> 

<body> 

«div id="header"> 导 航 部 分 </div> 

«div id="siderLeft"> 菜 单 部 分 </div> 

«div id="siderRight”> 内 容 部 分 </div> 

«div ”id="footer"> 底 部 说 明 部 分 </div> 
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于 上 述 代码 中 的 全 新 HTML 5 元 素来 说 , 用 户 可 以 使 用 传统 的 HTML 元 素 进 行 修 
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</body> 
</html> 
接 下 来 开始 分 析 新 旧 标 记 元 素 的 关系 ， 例 如 原来 的 代码 为 : 
<header> 导 航 部 分 </header> 
修改 后 的 代码 为 ; 
«div id="header"> 导 航 部 分 </div> 
由 此 可 以 看 出 , 使 用 如 下 标记 元 素 没有 任何 意义 ， 因 为 浏览 器 不 能 根据 标记 的 ID 号 属性 
来 推断 这 个 标记 的 真正 舍 义 。 这 是 因为 ID 号 是 可 以 变化 的 ， 不 利于 进行 寻找 。 


口 <divid="header"> 
口 <divid="siderLeft"> 
L] <divid="siderRight"> 
L] «div id="footer"> 
通过 HTML 5 中 的 3 


新 增 元 素 <header>， 可 以 明确 地 告诉 浏 


览 器 此 处 是 页 头 ， 使 用 <nav> 标 


于 构建 页 面 


记 来 构建 页 面 的 导航 ，<article> 标 记 用 
或 根 元 素 部 分 ， 并 且 这 些 标记 都 可 以 重复 使 


用 ， 从 而 提高 了 


内 容 的 一 部 分 ，<footer> 表 明 页 面 已 到 页 脚 
发 者 的 工作 效率 。 


除 此 之 外 ， 有 些 新 增 的 HTML 5 元 素 还 可 以 和 


EE 独 成 为 一 个 区 域 ， 例 如 下 面 的 代码 。 


<header> 
<article> 

<hl> 内 容 1</hl> 
</article> 
</header> 
<header> 
<article> 

<h2> 内 容 2 </h2> 
</article> 


</header> 


Yt HTML 5 中 ， 
己 的 单独 元 素 ， 这 和 <hl> 或 <h2> 标 记 元 素 的 原 
便于 维护 ， 而 且 代码 简单 ， 方 便 对 局 部 进行 修改 。 


通过 <article> 标 记 元 素 可 以 创建 一 个 新 的 节点 , 并 且 
理 一 样 。 这 样 做 不 仅 可 以 


每 个 节点 都 可 以 有 日 
使 内 容 区 域 各 自分 段 ， 


3.3 ”使 用 <detais> 标 记 元 素 实 现 交 互 


PhP，<details> 标 记 是 一 个 全 


在 HTML 5 H 


内 容 。 当 与 <summary> 标 记 配 合 使 用 时 ， 在 单 击 
置 的 内 容 。 
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新 的 元 素 ， 
节 。<details> 标 记 经 常 与 <summary> 元 素 配 合 使 用 。 
H«summary^ d i 


Sk Et 


功能 是 描述 
在 默认 情况 下 ， 不 
记 后 才 会 


文档 或 文档 某 个 部 分 的 细 
显示 <details> 标 记 中 的 
示 <details> 元 素 中 设 


Si 


Y 
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3.3.1 常用 属性 

<details> 元 素 的 常用 属性 如 下 。 

O open: 值 为 open， 功 能 是 定义 <details> 是 否 可 见 。 

O subject: 值 为 sub id， 功能 是 设置 元 素 所 对 应 项 目的 ID 号 。 

O draggable: 值 为 true 或 false， 功 能 是 设置 是 否 可 以 拖 动 元 素 ， 默 认 值 是 false, 

<details> 标 记 本 质 上 允许 用 户 在 单 击 标签 时 显示 和 隐藏 内 容 。 想 必 大 家 一 定 相 当 熟 悉 这 
种 效果 ,但 是 直到 现在 ,这 种 效果 还 一 直 是 用 JavaScript 实现 的 。 假 如 在 某 个 头 部 元 素 后 面 有 

个 箭头 ， 当 单 击 箭头 时 ， 下 面 的 附加 信息 将 会 呈现 ， 再 次 单 击 ， 箭 头 内 容 消 失 。 在 FAQ (在 

线 问答 ) 页 面 中 经 常 使 用 这 个 功能 。 

下 面 通过 一 个 实例 讲解 使 用 <details> 标 记 元 素 实 现 交 互 的 方法 。 


实例 3-3 "EN" 
源码 路 径 daima\3\3.html 
功能 使 用 <details> 标 记 元 素 实 现 交互 


实例 文件 3.html 的 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title> 交 互 元 素 <details> 的 使 用 </title> 
«style type="text/css"> 
body( 
font-size:12px 


j 
span{ 
font-weight:bold 
} 
details { 
overflow: hidden; 
height: 0; 
padding-left:200px; 
position: relative; 
display: block; 
j 
details[open] í 
height:auto; 
j 
</style> 
</head> 
<body> 
<span> 隐 藏 </span> 
<details> 
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生成 于 2012-05-17 
</details> 


<span> 显 示 </span> 


«details open="open"> 
生成 于 2012-05-17 
</details> 

</body> 

</html> 


在 上 述 代码 中 ,在 页 面 中 使 用 了 一 个 <details> 元 素 ， 通 过 不 设置 该 元 素 的 “open” 属 性 值 
置 该 元 素 属 性 值 为 “open” 进 行 比较 ， 并 将 结果 


与 设 


好 地 验证 <details> 元 素 的 “open” 属 性 ， 在 页 面 的 样式 ， 
的 样式 。 其 中 ， 第 一 个 <details> 使 用 默认 样式 ， 第 二 个 使 用 的 是 “open” 属 性 。 


状态 
AN 


执行 后 的 效果 如 图 3-3 所 示 。 


展示 在 页 面 中 。 在 本 实例 中 ， 为 了 能 更 


如 果 单 击 图 3-3 中 “详细 信息 ”前 面 的 小 三 角 符 号 ， 


所 示 。 
pa gs 
ui v 详细 信息 = 
生成 于 2012-05-17 
图 3-3 ”执行 效果 
3.3.2 ”实现 下 拉 弹 出 效果 


在 接 下 来 的 实例 中 ， 首 先 在 页 面 9 
侧 的 小 三 角 符 号 后 ， 将 在 下 方 弹出 
果 在 很 多 动态 网 站 中 上 


较 常 抑 ， 原 来 一 


显示 一 行 提问 文本 “需要 我 为 您 服务 吗 ?”， 当 单 击 左 


分 别 定义 了 该 元 素 的 默认 样式 和 显示 


则 这 部 分 内 容 将 会 消失 ， 如 图 3-4 


图 3-4 消失 部 分 内 容 


下 拉 区 域 ， 在 里 面 显示 文本 “非常 需要 ”上述 描述 效 


役 都 是 用 JavaScript 技术 或 Ajax 技术 实现 的 ， 但 现在 


用 户 只 需 使 用 HIML 5 中 的 <details> 标 记 元 素 即 可 实现 完全 一 样 的 功能 。 
下 面 将 讲解 使 用 <details> 标 记 实现 下 拉 弹 出 效果 的 方法 。 


实例 3-4 说 — UJ 
源码 路 径 daima\3\4.html 
功能 使 用 <details> 标 记 实 现下 拉 弹 出 效果 


实例 文件 4.html 的 具体 代码 如 下 。 


<!DOCTYPE html> 
<html> 

<head> 

<meta charset=utf-8 /> 


<title> 脚 本 控制 交互 元 素 <details></title> 
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<style type="text/css"> 
body { font-family: sans-serif; } 
details { 

overflow: hidden; 
background: #e3e3e3; 
margin-bottom: 10px; 
display: block; 

} 

details summary { 

cursor: pointer; 

padding: 10px; 

} 

details div { 

float: left; 

width: 65%; 

} 

details div h3 { margin-top: 0; } 
details img í 

float: left; 

width: 200px; 

padding: 0 30px 10px 10px; 
j 

</style> 

</head> 

<body> 

<details> 

<summary> 需 要 我 为 您 服务 吗 ?</summary> 
<p> 非 常 需 要 .</p> 
</details> 

</body> 

</html> 


在 上 述 代码 中 ， 当 用 户 需 要 显示 和 隐藏 内 容 时 ， 使 用 <details> 元 素 包 括 一 个 <summary> 


在 下 方 弹出 一 个 新 的 区 域 ， 如 图 3-6 所 示 。 


标签 ， 接着 是 内 容 。 当 单 击 标签 <summary> 时 ， AURIS 
CSS REF, HE A LEER 9E BE pointer] We, EJIM «margin-bottom» [X Z) F Iri PATER 


f 式 显示 内 容 标 签 。 另 外 在 上 述 


元 素 , 用 <padding> 来 做 间隔 。 执 行 后 的 效果 如 图 3-5 所 示 , 单 击 文字 左 侧 的 小 三 角形 符号 后 ， 


» 需要 我 为 您 服务 四 ? 2 r 5 
非常 需要 . 
图 3-5 初始 效果 图 3-6 JERIH 容 
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3.4 ”使 用 <sSummary> 标 记 元 素 实现 交互 


JE HTML 5 ! 


， 标 记 <summary> 包 含 了 <details> 元 素 的 标题 ， 元 素 <details> 能 够 描述 有 关 


文档 或 文档 片段 的 详细 信息 。 在 HTML 5 H 
过 <summary> 元 素 说 明文 档 的 标题 ， 通 过 < 


下 面 通过 一 个 具体 实例 讲解 使 用 <summary> 标 记 实 现 交 互 效 果 的 方法 。 


hh ，<summary> 通 常 配合 <details> 元 素 一 起 使 用 ， 通 
details> 元 素 说 明文 档 的 详细 信息 。 


实例 3-5 说 ” 明 
源码 路 径 daima\3\5.html 
功能 使 用 <summary> 标 记 实 现 交互 效果 


在 本 实例 中 ， 在 页 面 中 分 别 加 入 一 
<details> 元 素 内 容 时 ， 其 子 元 素 <summary> 以 字体 加 粗 的 形式 展示 在 页 面 中 。 实 例文 件 5.html 
的 代码 如 下 。 
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<!DOCTYPE html> 
<html> 
<head> 


«meta charset=utf-8 /> 


个 <details> 元 素 和 一 个 <summary> 元 素 ， 当 显示 


<title> 交 互 元 素 <summary> 的 使 用 </title> 


«style type="text/css"> 
body( 
padding:5px; 
font-size:12px 
j 
summary í 
font-weight:bold; 
j 
details í 
overflow: hidden; 
height: 0; 
padding-left:200px; 
position: relative; 
display: block; 
j 
details[open] í 
height:auto; 
j 
</style> 
</head> 
<body> 


<details open="open"> 


<summary> T [fi] W HH</summary> 


今天 是 2012 年 9 月 26 日 
</details> 
</body> 
</html> 


mim MAESTE! 


在 上 述 实例 代码 中 ， 为 了 突出 显示 <summary> 元 素 ， 增 加 了 一 个 加 粗 的 字体 效果 。 从 代 


码 的 结构 中 可 以 看 出 ，<summary> 元 素 包 含 在 <details> 元 素 中 ， 是 <details> 元 素 的 子 元 素 ， 应 


该 在 摆 放 位 置 时 尽量 放 在 第 一 个 。 执 行 后 的 效果 如 图 3 
号 后 ， 所 有 文字 将 隐藏 消失 ， 如 图 3-8 所 示 。 


v 页面 说 明 


今天 是 2012 年 9 月 26 日 


图 3-7 初始 效果 图 3-8 所 有 文字 将 隐藏 消失 


3.5 ”使 用 <memu> 标 记 元 素 


-7 所 示 ， 单 击 文字 左 侧 的 小 三 角形 符 


在 HIML 5 中， 除了 常用 的 内 容 交 互 元 素 外 ， 使 用 较为 频繁 的 还 有 菜单 交互 元 素 ， 此 功 


能 主要 采用 <menu> 和 <command> 两 个 元 素 实 现 。 


3.5.4 属性 介绍 


<menu> 是 HTML 5 中 的 标记 元 素 ， 此 元 素 其 实在 HTML 2 时 就 已 经 存在 , 但 是 在 HTML 


4 时 被 抛弃 。 在 HTML 5 中 重新 恢复 使 用 ， 并 且 为 其 赋予 了 全 新 的 功能 。 该 元 素 常 与 <i> 列 表 
元 素 结合 使 用 ， 用 来 定义 一 个 列表 式 的 菜单 。<menu> 的 属性 信息 如 表 3-1 所 示 。 


X 


kR 3-1 <menu> 的 属性 信息 
属 性 值 描 述 
autosubmit true/false 如 果 为 true， 那 么 当 表单 控件 改变 时 会 自动 提交 。 

compact compact rendering 不 支持 HTML 5 请 使 用 Css 代替 。 

label Imenulabel 为 菜单 定义 一 个 可 见 的 标注 。 

Context 
type toolbar 定义 显示 哪 种 类 型 的 菜单 ， 默 认 值 是 "list", 
list 


下 面 通过 一 个 实例 讲解 使 用 <menu> 标 记 元 素 实现 菜单 交互 的 方法 。 本 实例 的 功能 是 二 


面 中 通过 <menu> 元 素 列表 显示 三 行 图 文 并 刻 的 文本 选项 


E 页 


。 首 先 添 加 了 一 个 <menu> 元 素 , 在 该 


元 素 中 加 入 <li> 列 表 元 素 ;， 然后， 在 列表 元 素 中 分 别 放置 


个 <img> 与 <span> 元 素 ， 用 于 展示 


图 片 与 标题 ， 最 后 使 用 CSS 样式 代码 ， 当 用 户 将 鼠标 移 至 某 个 <li> 元 素 时 ， 展 示 菜 单 中 某 选 
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项 被 选中 的 效果 。 
实例 3-6 说 明 
源码 路 径 daima 3 6.html 
功能 使 用 <menu> 标 记 元 素 实现 菜单 交互 


实例 文件 .html 的 具体 代码 如 下 。 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title> 使 用 <menu> 元 素 </title> 
«style type="text/css"> 

body( 

padding:5px; 


font-size:12px 
} 
menu( 
padding:0; 
margin:0; 
display:block; 
border: solid 1px #365167; 
width:222px 
} 
menu li{ 
list-style-type:none; 
padding:5px; 
margin:5px; 
height:28px; 
width:200px 
} 
menu li:hoverí 
border: solid Ipx #7DA2CE; 
background-color:#CFE3FD 
} 
menu li img í 
clear:both; 
float:left; 
padding-right:8px; 
margin-top:-2px 
} 
menu li span{ 
padding-top:5px; 
float:left; 


font-size:13px 
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} 
</style> 
</head> 
<body> 
<menu> 
<li> 
<img src=" 1.png"></img> 
<span>Firefox</span> 
</li> 
<li> 
«img src="2.png"></img> 
<span>Chrome</span> 
</li> 
<li> 
«img Src="3.png"></img> 
<span>Safari</span> 
</li> 
</menu> 
</body> 
</html> 


当 定 义 菜单 列表 时 ， 通 常 使 用 <menu> 元 素来 定义 菜单 的 框架 ， 框 架 中 的 内 容 使 用 <li> 元 
素来 进行 构造 ， 以 形成 列表 形状 ; 另外 ， 为 了 美化 列表 选项 的 展示 效果 ， 需 要 使 用 CSS 样式 
来 修饰 ， 表 示 通 过 CSS 样式 控制 鼠标 在 移出 与 移入 元 素 时 的 不 同 展示 效果 。 注 意 菜 单 还 可 以 
由 套 在 别 的 菜单 中 ， 形 成 带 层 次 的 莱 单 结构 。 执 行 后 的 效果 如 图 3-9 所 示 。 


& Firefox 


© Chrome 


E Safari 


图 3-9 执行 效果 


3.5.2 ”实现 右键 菜单 功能 
鼠标 右键 的 功能 非常 强大 ， 在 网 页 中 右键 单 击 后 会 显示 一 些 常用 的 快捷 菜单 ， 例 如 在 
Firefox 网 页 中 右键 单 击 后 会 弹出 如 图 3-10 所 示 的 快捷 菜单 。 
本 实例 的 功能 是 为 浏览 器 添加 几 个 右键 菜单 选项 ， 这 个 功能 可 以 通过 HTML 5 中 的 
<contextmenu>、<menu>、<menuitem> 联 合 实现 。 在 上 一 个 实例 中 已 经 讲解 了 <menu> 的 基本 
用 法 ， 接 下 来 介绍 <contextmenu> 和 <menuitem> 的 基本 知识 。 
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(1) contextmenu 

在 HTML 5 中 ， 每 个 元 素 新 增 了 一 个 属性 :“contextmenu” 属性 contextmenu 表示 上 下 
ACER, BU Ub UU ELT PES 

(2) «menuitem» 

在 <menu> </menu> 内 部 可 以 从 入 多 个 菜单 项 ， 即 <menuitem></menuitem> 。<menuitem> 
有 如 下 三 个 属性 : 

口 label: 沫 单项 显示 的 名 称 。 

T icon: 在 菜单 项 左 侧 显示 的 图 标 。 

口 onclick: 点 击 业 单项 触发 的 事件 。 

在 接 下 来 的 内 容 中 ， 将 通过 一 个 具体 实例 讲解 实现 右键 菜单 功能 的 方法 。 


n 


H 


"UTE "ENT. 
源码 路 径 daima\3\7.html 
功能 实现 右键 菜单 功能 


实例 文件 7.html 的 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 


<meta charset=utf-8 /> 


<title> 使 用 <menu> 元 素 </title> 
</head> 


<body> 


«div style='display:inline' contextmenu="mymenu"> 右 击 我 试 试 </div> 


«menu type-"context" id="mymenu"> 
«menuitem label-"3 ff. 1" onclick="alert( 这 是 菜单 1*);" icon="1.png"></menuitem> 
«menuitem label=" 菜 单 2" onclick="alert( 这 是 菜单 2');" icon="2.png"></menuitem> 
«menu label=" 菜 单 3"> 


«menuitem label=" 菜 单 3-1" icon="3.png" onclick="alert( 这 是 菜单 3-17); 
</menuitem> 


«menu label=" 菜 单 3-2" > 


«menuitem label=" 菜 单 3-2-1" icon="123 .png" onclick="alert( 这 是 菜单 3-2-1');"> 
</menuitem> 
</menu> 
</menu> 
</menu> 
</body> 


</html> 


运行 网 页 后 ， 当 鼠标 右 击 “ 右 击 我 试 试 ” 就 会 出 现 菜单 效果 ， 如 图 3-11 所 示 。 
读者 需要 注意 ， 目 前 只 有 火狐 浏览 器 支持 上 述 功能 效果 。 
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PED 
RIE (F) 3 
重新 载 入 (R) jg ^" > 菜单 3-2-1 
BEG Te [CE 
添加 至 快速 拨号 他) EHE) 
EEG 
将 此 页 加 为 书签 W 添加 至 快速 拨号 0) 
页 面 另存 为 让)… 将 此 页 加 为 书签 W 
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3.6 ”使 用 <command> 标 记 元 素 


在 HTML 5 中 ，<command> 是 一 个 新 增 的 标记 元 素 


利用 该 标记 的 “url” 属 性 可 以 添加 图 


片 ， 并 有 


实现 图 片 按钮 效 


， 功 能 是 定义 各 种 类 型 的 命令 按钮 。 


Ro JAR, 


通过 改变 标记 中 的 


“type” 属 性 值 ， 可 以 定义 复 选 框 或 单 选 框 按钮 。<command> 元 素 包 含 的 属性 及 描述 信息 如 
dé 3-2 所 示 。 
表 3-2 <command> 元 素 包 含 的 属性 及 描述 信息 
属 性 值 描 述 
checked checked 定义 是 否 被 选中 ， 仅 用 于 radio 或 checkbox 类 型 
disabled disabled 定义 command 是 否 可 
icon url 定义 作为 command 来 显示 的 图 像 的 url 
label text 为 command 定义 可 见 的 label 
radiogroup groupname 定义 command 所 属 的 组 名 ， 仅 在 类 型 为 radio 时 使 用 
checkbox 
type command 定义 该 command 的 类 型 ， 默 认 是 "command" 
radio 
注意 ; 虽然 各 浏览 器 对 HTML 5 兼容 性 都 进行 了 很 好 的 支持 ， 但 毕竟 不 可 能 照顾 到 每 个 


元 素 的 全 部 属性 ， 例 如 <command> 元 素 就 有 许多 属性 不 能 被 浏览 器 支持 ， 因 此 ， 本 书 所 提 到 


的 功能 也 只 是 HTML 5 元素 所 具有 的 功能 ， 暂 时 还 不 能 真正 执行 ， 但 随 着 各 大 浏 


HTML 5 的 兼容 性 力度 的 加 强 ， 这 种 暂时 不 兼容 的 功能 终 将 解决 。 
<command> 能 够 定义 各 种 类 型 的 按钮 ， 例 如 命令 按钮 、 单 选择 按钮 、 图 片 按 钮 ， 另 外 也 


能 够 定义 复 选 枉 。 如 果 <co 
AUR. Dp 


下 拉 荣 音 


下 面 将 通过 


例 的 页 面 


> DAREI 


览 器 厂商 对 


匡 效果 的 方 说 


mmand> 元 素 与 <menu> 元 素 结合 使 用 ， 可 以 在 网 页 中 实现 弹出 式 的 
二 菜单 中 的 某 个 选项 时 ， 将 执行 相应 的 操作 。 
个 实例 讲解 使 用 <command> 标 记 元 素 实现 动态 对 话 相 


ko ERK 


上 一 个 <menu> 元 素 和 两 个 <command> 元 素 ， 并 将 <command> 元 素 包 含 在 
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HTML 5 天 发 从 入 门 到 精通 


<menu> H 
内 容 。 


Ph。 当 单 击 其 中 一 个 <command> 元 素 时 会 弹出 一 个 对 话 框 ， 


显示 对 应 操作 的 


源码 路 径 daima\3\8.html 


功能 使 用 <command> 标 记 元 素 实 现 动 态 对 话 框 效果 


实例 
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文件 8.html 的 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 
«meta charset-utf-8 /> 
«title» fX 2 fii H]«menu» Ej «command» «title 
«style type="text/css"> 

body { 

padding:5px; 


font-size:12px 
j 
menu( 
padding-left: 10px; 
padding-bottom: 10px; 
display:block; 
border: solid 1px #365167; 
width:40px; 
height:50px 
j 
command( 
float:left; 
margin:5px; 
width:30px; 
cursor:hand; 
j 
#dialog í 
display:none; 
position:absolute; 
left:25%; 
top:9%; 
font-size:13px; 
width:320px; 
height:150px; 
border:#666 solid 3px 
j 
#dialog .title í 
padding:5px; 
background-color:£eee; 


height:21px; 
line-height:21px 
j 
#dialog .title .fleft í 
float:left 
j 
#dialog .title .fright{ 
float:right 
} 
#dialog .content{ 
padding:50px 
} 

</style> 

</head> 

<body> 
<menu> 
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«command onClick-"command click( 文 件 )"> 文 件 </command> 
«command onClick-"command click( 打 开 )"> 打 开 </command> 


«command icon="Images/chrome.png" label=" 带 图 片 的 按钮 "></command> 


</menu> 
<div id="dialog"> 


<div class="title"> 


<div class="fleft"> 提 示 </div> 
«div class="fright"> 关 闭 </div> 


</div> 


<div class 


content" 


«div id="divTip"> 中 ...</div> 


</div> 
</div> 


«script type="text/javascript"> 


function command click(strS){ 


document.getElementsByName("command").disabled="disabled" 


document.getElementById("dialog").style.display="block"; 
var strContent=" 正 在 操作 <font color=red> "+strS+" </font> 选 项 "; 
document.getElementBylId("divTip").innerHTMLestrContent; 


} 
</script> 
</body> 
</html> 


在 上 述 代码 中 ，<command> 标 记 元 素 被 包含 在 <menu> 元 素 中 ， 同 时 为 了 使 元 素 显示 手 状 


的 被 单 击 效果 ， 加 入 了 如 样式 中 粗 体 字 所 示 的 代码 ;另外 ， 当 <command> 元 素 被 单 击 时 将 弹 


其 实 <command> 元 素 除 了 可 以 角 
钮 图 片 ， 例 如 下 面 的 代码 。 


出 一 个 显示 操作 内 容 的 对 话 框 ， 具 体内 容 是 JavaScript 代码 中 的 部 分 。 如 图 3-12 所 示 。 


I 


中 发 “onClick” 事 件 外 ， 还 可 以 通过 “icon” 届 


Pn 


性 设置 按 
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<command icon="Images/chrome.png" label=" 有 


文件 
打开 


图 3-12 ”执行 效果 


图 的 按钮 ”></command> 


通过 上 述 代码 创建 了 一 个 带 图 片 的 <command> 元 素 ， 并 且 指 定 了 元 素 的 名 称 是 “ 带 名 


的 


JR". 另外， 还 可 以 通过 JavaScript 代码 控制 <command> 元 素 的 “disabled” 属 性 ， 例 如 下 面 


的 代码 。 


«script type=" “text/j avascript > 


</script> 


EX JavaScript 代码 的 功 
在 单 击 <command> 元 素 操作 某 项 功能 的 后 面 ， 这 样 可 以 防止 上 


Fat. 


Ak EH 
H5 AE» 


禁止 单 击 全 部 的 <command> 元 素 。 通 常 将 上 述 代码 放置 


3.7 ”使 用 <progress> 标 记 元 素 


# HTML 5 rh, 可 
互 时 ， 为 了 增强 用 户 的 


日 户 反复 单 击 或 提示 用 户 按钮 已 


以 使 用 <progress> 标 记 元 素 实 现 进度 条 效果 。 当 页 面 与 用 户 进行 数据 交 


UI 体验 ， 通 过 进度 条 效果 显示 在 页 面 


元 素 是 HTML 5 
在 下 载 一 个 文件 
度 的 方式 既 可 以 


TE 


中 新 增 的 状态 交互 元 素 ， 用 来 表示 页 面 ! 
时 ， 文 件 下 载 到 本 地 的 进度 值 ， 可 以 通过 该 元 素 动态 


中 的 各 种 进度 状态 。 
的 某 个 任务 完成 的 进度 。 例 如 用 户 


<progress> 


数 ， 也 可 以 使 用 百分比 〈 如 10% 一 100% )。 


<progress> 元 素 的 属性 信息 如 表 3-3 所 示 。 


表 3-3 <progress> 元 素 的 属性 信息 


展示 在 页 面 中 。 展 示 进 


属 性 值 描述 
max number 定义 完成 的 值 
value number 定义 进程 的 当前 值 
在 <progress> 元 素 中 ， 设 置 的 “value” 值 必须 小 于 或 等 于 “max” 属 性 值 ， 并 且 两 者 都 必 


须 大 于 0。 下 面 将 通过 
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个 实例 讲解 使 用 <progress> 标 记 元 素 实现 进度 条 效果 的 方法 。 
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实例 3-9 说 明 
源码 路 径 daima 3 9.html 
功能 使 用 <progress> 标 记 元 素 实现 进度 条 效果 


本 实例 的 功能 是 ,分别 在 页 面 中 创建 一 个 <progress> 元 素 和 一 个 “下 载 按钮 ”>。 当 单 击 
载 按钮 > 时, 通过 元 素 <progress> 动 态 展 示 下 载 进度 状态 和 百分比 信息 。 当 下 载 结 束 时 显示 “ 
载 已 经 完成 !” 的 提示 信息 。 实 例文 件 9.html 的 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 
«meta charset-"utf-8" /> 
<title> 使 用 progress 元 素 </title> 
«style type="text/css"> 
body í 
font-size: 12px 


T 


} 

pi 
padding:Opx; 
margin:O0px 

j 

.inputbtn í 
border:solid 1px #ccc; 
background-color:#eee; 
line-height: 18px; 
font-size:12px 

} 

</style> 

</head> 

<body> 


<p id="pTip"> 开 始 下 载 </p> 

«progress value-"0" max="100" id="proDownFile"></progress> 
<input type="button" value=" 下 载 按钮 " 

="inputbtn" onClick="Btn_Click();"> 

«script type="text/javascript"> 


class 


var intValue = 0; 
var intTimer; 
var objPro = document.getElementBylId('proDownFile"; 
var objTip = document.getElementById('pTip); 
Ie E SE 
function Interval handler() í 
intValue++; 
objPro.value = int Value; 
if (intValue >= objPro.max) í 
clearlnterval(intTimer); 
objTip.innerHTML = "下 载 已 经 完成 ! "; 


EN 45 


— HTML 5 开发 从 入 门 到 精通 


} else í 
objTip.innerHTML = "正在 下 载 中 "+ intValue + "96"; 


} 
} 
/下 载 按钮 点 击 事件 
function Btn ClickO{ 
intTimer = setInterval(Interval handler, 100); 


} 
</script> 
</body> 
</html> 


在 上 述 代 码 中 ， 为 了 使 <progress> 元 素 能 够 动态 展示 下 载 进 度 ， 需 要 通过 JavaScript 脚本 
语言 编写 一 个 定时 事件 。 在 这 个 事件 中 累加 变量 值 , 并 将 该 值 设置 为 <progress> 元 素 的 “value” 
属性 值 。 ma (pA eri au “max” 属 性 值 时 将 停止 累加 ， 并 显示 
“下 载 已 经 完成 !” 的 提示 信息 ; 否则 将 动态 显示 正在 累加 的 百分比 数值 ， 具 体 设 置 是 通过 
JavaScript 脚本 代码 实现 的 。 

执行 后 的 效果 如 图 3-13 所 示 ， 当 单 击 “ 下 载 按 钮 ”后 弹出 一 个 进度 条 效果 ， 如 图 3-14 
所 示 。 


正在 下 载 中 18% 
PE 下载 按钮 


开始 下 载 
r 下 载 按钮 


图 3-13 初始 效果 图 3-14 下 载 进 度 条 


进度 条 完成 后 的 效果 如 图 3-15 所 示 。 


下 载 已 经 完成 
m F 


图 3-15 进度 条 完成 后 的 效果 


3.8 ”使 用 <imneter> 标 记 元 素 


TE HTML 5 中 ， 可 以 使 用 <meter> 标 记 元 素 实 现 百分比 效果 。<meter> 是 HTML 5 中 新 增 
的 标记 ， 用 于 表示 在 一 定数 量 范围 中 的 值 ， 例 如 投票 中 各 个 候选 人 各 占 比 例 情况 及 考试 分 数 
等 。<meter> 元 素 仅 是 帮助 浏览 器 识别 HTML 中 的 数量 ， 不 对 该 数量 做 任何 的 格式 修饰 。 在 
<meter> 元 素 中 有 6 个 属性 ， 通 过 这 些 属 性 会 根据 浏览 器 的 特征 以 最 好 的 方式 展示 这 个 数量 。 

<meter> 标 记 元 素 的 属性 信息 如 表 3-4 所 示 。 
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表 3-4 <meter> 标 记 元 素 的 属性 信息 


属 性 值 描 述 
high number 定义 度量 的 值 位 于 哪个 点 ， 被 界定 为 高 的 值 
low number 定义 度量 的 值 位 于 哪个 点 ， 被 界定 为 低 的 值 
max number 定义 最 大 值 。 默 认 值 是 1 
min number 定义 最 小 值 。 默 认 值 是 0 
定义 什么 样 的 度量 值 是 最 佳 的 值 
optimum number 如 果 该 值 高 于 "high" 属性 ， 则 意味 着 值 越 高 越 好 
如 果 该 值 低 于 "low" 属性 的 值 ， 则 意味 着 值 越 低 越 好 
value number 定义 度量 的 值 。 


“low”“hight”“optimum” 这 三 个 属性 值 的 功能 是 ， 将 <meter> 元 素 展 示 的 测量 范围 划分 
为 “low”“medium” 以 及 “high” 三 个 部 分 ， 以 此 来 判断 该 测量 的 哪个 部 分 是 最 优 的 。 请 读 
者 考虑 下 面 这 个 <meter> 元 素 : 


<meter value="0.3" optimum="1" high="0.9" low="0.1" max="1" min="0"></meter> 


<span>30%</span> 


在 上 述 代码 中 ， 最 低 值 可 能 为 0， 由 “min” 表 示 。 但 是 实际 最 低 为 0.1， 由 “low” 表 示 。 
最 高 值 可 能 为 1， 但 实际 最 高 为 0.9。 

“low”“high” 将 测量 范围 【0 一 1 划分 为 【0 一 0.1】(low)、【0.1 一 0.9】(medium)、【0.9 一 
1] (high) 三 个 范围 ,“optimum” 指 明 最 优 位置 在 1 处 ， 此 时 该 值 比 “high” 值 大 ， 那 么 就 表 
示 “value” 值 越 大 越 好 ; 类似 的 ， 如 果 “optimnum” 值 比 “low” 小 ， 则 表示 “value” 值 越 小 
越 好 ;如 果 “optimum” 值 落 在 “low” 值 与 “high” 值 之 间 ， 则 表示 “value” 值 不 高 不 低 
最 好 。 

例如 下 面 的 代码 演示 了 此 元 素 的 基本 用 法 ; 


«IDOCTYPE HTML> 

<html> 

<body> 

«meter min="0" max="10">2</meter><br /> 
<meter>2 out of 10</meter><br /> 
<meter>20%</meter> 

</body> 

</html> 


上 述 代码 的 执行 效果 如 图 3-16 Bron. 


2 
2 nut of 10 
209 


图 3-16 执行 效果 


下 面 通过 一 个 实例 讲解 使 用 <progress> 标 记 元 素 实现 进度 条 效果 的 方法 。 
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实例 3-10 说 HJ 
源码 路 径 daima 3M O.html 
功能 使 用 <progress> 标 记 元 素 实现 进度 条 效果 


本 实例 的 功能 是 ， 显 示 两 个 投票 候选 人 的 票数 比例 。 实 例文 件 10.html 的 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 使 用 meter 元 素 </title> 
«style type="text/css"> 
body í 
font-size:13px 


} 
</style> 
</head> 
<body> 
<p> 共 有 200 人 参与 投票 ,明细 如 下 : </p> 
<p>AAA: 
«meter value-"0.30" optimum-"1" 
high-"0.9" low-"1" max-"1" min="0"> 
«/meter- 
<span> 3096 </span></p> 
<p>BBB: 
«meter value-"70" optimum="100" 
high-"90" low="10" max-"100" min="0"> 
«/meter- 
<span> 70% </span></p> 
</body> 
</html> 


在 上 述 代码 中 ， 候 选 人 “BBB ”所 占 的 比例 是 百分制 ， 


的 70， 最 低 比例 可 能 为 0， 但 实 


际 最 低 为 10; 最 高 比例 可 能 为 100， 但 实际 最 高 为 90。 其 实 <meter> 元 素 中 的 数量 也 可 以 使 用 


浮 点 数 表 示 ， 如 上 述 代码， 
中 使 用 了 <span> 元 素 展 示 这 些 数值 。 
执行 后 的 效果 如 图 3-17 所 示 。 


共有 200 八 做 与 投票 , 明细 如 下 : 
AAA: Wm 30% 
BBB:  e—-— 70% 
图 3-17 执行 效果 
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3.9 使 用 树 节 点 标记 元 素 


在 HTML 5 应 用 中 ,新 增 了 许多 用 于 标志 节点 的 元 素 , 例如 <section> 和 <nav> 等 ,通过 这 
些 元 素 可 以 将 页 面 内 容 实 现 分 段 或 分 区 显示 。 本 届 将 详细 讲解 HTML 5 中 和 树 节 点 有 关 的 标 
记 元 素 。 


3.9.1 ”<section> 元 素 


<section> 元 素 是 HTML 5 中 新 增 的 元 素 。 该 元 素 用 于 标记 文档 中 的 区 段 或 段落 ， 例 如 文 
章 中 的 章节 、 页 眉 、 页 脚 的 设置 。<section> 元 素 的 属性 信息 如 下 : 

O cite: 值 为 URL， 设 置 <section> 的 URL， 假 如 <section> 摘 自 Web. 

O hidden: 值 为 true 或 false， 用 于 显示 或 隐藏 <section> 元 素 ， 默 认 值 是 false, 

口 draggable: 值 为 true 或 false， 用 于 设置 是 否 可 以 拖 动 <section> 元 素 ， 默 认 值 是 false, 


3.9.2 ”<nav> 元 素 


在 HIML 5 中 ,只 要 是 导航 性 质 的 链接 ,用 户 就 可 以 很 方便 地 将 其 放 入 <nav> 元 素 中 。 该 
元 素 可 以 在 一 个 文档 中 多 次 出 现 ， 作 为 页 面 或 部 分 区 域 的 导航 。 请 读者 看 下 面 的 代码 ; 


«nav draggable="true"> 

<a hre 人 "index.html"> 首 页 < / a> 
<a href="book.html"> K] E</a> 

<a href="bbs.html"> 论 坛 </a> 


</nav> 


通过 上 述 代码 创建 了 一 个 可 以 拖 动 的 导航 区 域 , 在 上 述 <nav> 元 素 中 包含 了 三 个 用 于 导航 
的 超级 链接 ， 分 别 是 “首页 ”“ 图 书 ” 和 “论坛 ”。 该 导航 可 用 于 全 局 导航 ， 也 可 放 在 某 个 自 
落 ， 作 为 区 域 导航 。 


3.9.3 ”<hgroup> 元 素 

<hgroup> 元 素 是 HTML 5 中 新 增 的 元 素 ， 用 于 对 页 面 的 标题 进行 分 组 ， 从 而 形成 一 个 组 
群 。 为 了 更 好 地 说 明 各 组 群 的 功能 , 该 元 素 常 常 与 元 素 <figcaption> 结 合 使 用 , 通过 <figcaption> 
元 素 说 明 各 组 群 的 功能 。 请 读者 看 下 面 的 代码 : 


<hgroup draggable="true"> 
<figcaption> 标 题 一 </figcaption> 
<hl> 标 题 hl</hl> 

<h2> 标 题 h2</h2> 

</hgroup> 


在 上 述 代码 中 ， 通 过 元 素 <hgroup> 创 建 了 一 个 标题 组 ， 命 名 为 “标题 一 ”。 该 标题 中 包含 


了 两 个 子 标 题 ， 分 别 为 “标题 hl ”与 “标题 h2 ”。 
下 面 将 通过 一 个 实例 讲解 在 网 页 中 实现 一 个 树 节 点 效果 的 方法 。 
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实例 3-11 说 HJ 
源码 路 径 daima\3\11.html 
功能 在 网 页 中 实现 一 个 树 节点 效果 


本 实例 的 功能 是 ， 使 用 <nav> 元 素 实现 节点 效果 。 
航 的 链接 组 ， 其 中 的 导航 元 素 可 以 链接 到 其 他 页 面 或 当前 页 面 的 其 他 部 分 。 并 不 是 所 有 的 链 
接 组 都 要 放 进 <nav> 元 素 中 ; 例如， 在 页 脚 中 通常 会 


声明 等 ; 


人 码 如 下 。 
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<nav> 元 素 是 一 个 可 以 用 来 作为 页 面 导 


一 组 链接 ， 包 括 服务 条 款 、 首 页 、 版 权 


这 时 使 用 <footer> 元 素 是 最 恰当 的 ， 而 不 需要 <nav> 元 素 。 实 例文 件 11.html 的 具体 代 


<body> 

<hl>The Wiki Center Of Exampland</h1> 
<nav> 

<ul> 

<li><a href-"/"-Homec/a»«/l 

<li><a href-"/events"7Current Events</a></li> 
...more... 

</ul> 

</nav> 

<article> 

<header> 

<h1>Demos in Exampland</h1> 
<p>Written by A. N. Other.</p> 
</header> 

<nav> 

<ul> 


<li><a href="#public">Public demonstrations</a></li> 


<li><a href="#destroy">Demolitions</a></li> 
„more... 
</ul> 
</nav> 
<div> 
<section id: 
<h1>Public demonstrations</h1> 


<p>...more...</p> 


public"> 


</section> 

«section id="destroy"> 
<hl>Demolitions</h1> 
<p>...more...</p> 
</section> 

...more... 

</div> 


<footer> 


<p><a href="?edit">Edit</a> | «a href="?delete">Delete</a> | <a href="? 
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Rename">Rename</a></p> 

</footer> 

</article> 

<footer> 

<p><small>© copyright 1998 Exampland Emperor</small></p> 
</footer> 

</body> 

</html> 


通过 上 述 代码 可 以 看 到 ,<nav> 元 素 不 仅 可 以 用 来 作为 页 面 全 局 导航 ,也 可 以 放 在 <article> 
标签 内 , 作为 单 篇 文章 内 容 的 相关 导航 链接 到 当前 页 面 的 其 他 位 置 。 执 行 效果 如 图 3-18 Bron. 


The Wiki Center Of Exampland 


e Home 
e Current Events 
... more... 


Demos in Exampland 


Written by À. N. Other. 

e Public demonstrations 

e Demolitions 

... MOTE... 

Public demonstrations 
...more... 
Demolitions 
<.. MTC: + 
... MOTE... 
Edit | Delete | Rename 


© copyright 1998 Exampland Emperor 


图 3-18 执行 效果 


3.10 ”使 用 分 组 标记 元 素 


在 传统 的 HTML 标记 语言 中 ， 可 以 通过 <ul>、<ol>、<dl> 元 素 实现 分 组 效果 。 在 HTML 5 
中 , 对 原 有 的 分 组 内 容 元 素 <ul>、<ol>、<dl> 进 行 了 整体 改良 , 有 的 元 素 增加 了 许多 新 的 属性 ， 
有 的 元 素 则 废除 了 一 些 不 合理 的 原 有 特征 。 


3.10.1 <ul> 元 素 

在 HTML 5 中 ，<ul> 元 素 用 于 定义 页 面 中 的 无 序列 表 ， 其 用 法 与 HTML 4 类 似 。 区 别 是 
HTML 5 不 再 支持 “type” 与 “compact” 这 两 个 属性 。 因 为 <ul> 元 素 通 常 与 <li> 元 素 组 合 使 用 ， 
所 以 HTML 5 也 不 支持 <l 这 元 素 的 “type” 属 性 ， 而 是 改 用 CSS 样式 来 定义 列表 的 类 型 。 例 如 
如 下 HTML 页 面 中 的 代码 : 


= 


<ul> 
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<l>AA(I> 
<li>BB 
<ul> 
<li>CC</li> 
<li>DD</li> 
</ul> 

</li> 
<li>CC</li> 
</ul> 


在 上 述 代码 中 ， 通 过 <ul> 元 素 创 建 了 
表 项 “BB”, 在 “BB” 列表 项 
列表 项 的 子 项 信息 ， 这 个 例子 


3.10.2 <o> tA 


在 HTML 5 中 ，<ol> 元 素 用 于 在 页 面 
中 新 增加 了 如 下 两 个 属性 : 


Q start: 用 于 上 自 定 义 列表 项 开始 的 编写。 


PpP， 又 通过 <ul> 元 素 新 增加 ] 
的 子 项 信息 包括 “CC” 和 “DD”。 


个 带 嵌 套 的 列表 “AA”， 然 后 又 通过 <li> 创 建 了 列 


个 子 列表 ， 用 于 展示 上 级 “BB” 


有 序 的 创建 列表 。 与 HTML 4 相 比 ， 在 HTML 5 


O reversed: 用 于 设置 列表 是 否 进 行 肥 问 排 序 。 


接 下 来 将 通过 一 个 实例 


解 将 网 页 中 的 内 容 分 组 列表 显示 的 方法 。 


实例 3-12 说 HJ 
源码 路 径 daima3M2.html 
功能 


将 网 页 中 的 内 容 分 组 列表 显示 


在 本 实例 中 ， 通 过 <ot> 元 素 创建 一 个 “MTYV 排行 榜 ” 列 表 ， 并 分 别 添加 三 个 选项 CAA. 


BB. CC) 作为 列表 的 内 容 。 另 外 ， 增 加 一 个 文本 框 “ 设 置 开 始 值 ”与 一 个 “ 厅 


pE" ZH; dE 


文本 框 ! 
排行 榜 。 
s: pi 
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WANEH ht 


定 ” 按 钮 后 , 将 以 文本 框 中 的 值 为 列表 项 开始 的 编号 显示 MTV 


<!DOCTYPE html> 
<html> 

<head> 

«meta charset-"utf-8" /> 
<title> 使 用 列表 </title> 


| 文件 12.html” 的 具体 代码 如 下 。 


<link href-"Css/css3.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" async="true"> 


function Btn Click) í 


var strNum-document.getElementById("txtOrderNum").value; 


var strDiv-document.getElementBylId("olList"); 
strDiv.setAttribute("start" ,strNum); 


j 


</script> 
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</head> 
<body> 
<h5>MTV 排行 榜 </h5> 
<ol id="olList"> 
<li>AA</li> 
<li>BB</li> 
<li>CC</li> 
</ol> 
<h5> 设 置 开始 值 </h5> 
<input type="text" id="txtOrderNum" 
class="inputtxt" style="width:60px" /> 


<input type="button" value=" 确 定 " 
class="inputbtn" onClick="Btn_Click(); "> 
</body> 
</html> 
在 上 述 JavaScript 代码 中 , 先 定 义 一 个 函数 Btn. Click0, 用 于 在 单 击 “确定 ”按钮 时 调用 。 

在 该 函数 中 先 获取 输入 文本 的 值 与 <o> 列 表 元 素 ， 并 分 别 保存 全 变量 “strNum” 与 “strDiv” 
中 。 然 后 通过 <setAttribute> 方 法 将 列表 元 素 的 “start” 属 性 设置 为 变量 “strNum” 的 值 ， 从 而 
改变 了 列表 项 元 素 编号 的 开始 值 。 例 如 本 实例 在 文本 框 中 输入 数字 7 那么 ， 列 表 项 元 素 的 编 
号 起 始 值 将 从 7 开始 。 
执行 后 的 效果 如 图 3-19 所 示 ， 如 果 在 文本 框 中 输入 一 个 数字 ， 例 如 7 单 击 “ 确 定 ” 按 钮 


后 将 以 7 开始 进行 排序 ， 如 图 3-20 所 示 。 


下 T? 排 行 榜 下 TF? 排行 榜 
1. AA T. AA 
2. BB 8. BB 
3. CC 9. CC 

设置 开始 值 

确定 | 


图 3-19 ”执行 效果 图 3-20 ”排序 效果 


941 使 用 文本 层次 语义 标记 

1E HTML HAF, 为 了 使 文本 内 容 更 加 形象 、 生 动 ， 需 要 增加 一 些 具 有 特殊 功能 的 元 素 ， 
用 于 突出 文本 间 的 层次 关系 或 标 为 重点 , 一 般 将 这 样 的 元 素 称 为 文本 层次 语义 标记 。 在 HTML 
， 通 过 元 素 <time>、<mark> 和 <cite> 可 以 设置 文本 层次 。 


5! 


3.11.1 ”<time> 元 素 
<time> 元 素 是 HTML 5 新 增加 的 一 个 标记 ， 用 于 定义 时 间或 日 


期 。 访 元素 可 以 代表 24 小 
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TI 


“datetime” 设 为 相应 的 时 间或 日 期 即 
<time> 元 素 的 属性 如 表 3-5 所 示 。 


Jo 


时 中 的 茶 一 时 刻 ， 当 表示 时 刻 时 允许 有 时 间 差 。 在 设置 时 间或 


表 3-5 <time> 元 素 的 属性 


日 期 时 ， 2 


需 将 该 元 素 的 属性 


属 性 值 描 X 
datetime datetime 规定 日 期 /时 间 。 和 否则 ， 由 元 素 的 内 容 给 定 日 期 /时 间 
pubdate pubdate 指示 <time> 元 素 中 的 日 期 /时 间 是 文档 (或 <article> 元 素 ) 的 发 布 日 期 


下 面 的 代码 演示 了 <time> 元 素 的 基本 用 法 。 


<html> 
<body> 
<p> 


我 们 在 每 天 早上 <time>9:00</time> 开始 营业 。 


</p> 
<p> 


我 在 «time datetime="2010-02-14"> 情 人 节 </time> 有 个 约会 。 


</p> 
</body> 
</html> 


上 述 代码 的 执行 效果 如 图 3-21 所 示 。 


<time> 元 素 中 的 可 选 属性 “pubdate” 表 示 时 间 是 否 为 发 我 们 在 每 天 早上 9:00 开始 营业 。 


布 日 期 , 它 是 
还 可 用 于 <article> 元 素 。 


3.11.2 ”<mark> 元 素 


个 布尔 值 , 该 属性 不 仅 可 以 用 于 <time> 元 素 ， 


我 在 情人 节 有 个 约会 。 


执行 效果 


<mark> 元 素 是 HTMLS 中 新 增 的 元 素 , 主要 功能 是 在 文本 中 高 亮 显 示 某 个 或 菜 几 个 字符 ， 


目的 是 引起 


用 户 的 注意 。 


3.11.3 ” ”<cite> 元 素 
JE HTML 5 ! 


其 使 用 方法 与 <em> 和 <strong> 有 相似 之 处 ， 但 相 比 而 言 ，HTML 5 
中 新 增 的 <mark> 元 素 在 突出 显示 时 ， 更 加 随意 与 灵活 。 


, 使 用 <cite> 元 素 可 以 创建 一 个 引用 标记 ,用 于 文档 中 参考 文献 的 引用 说 明 ， 


如 书 名 或 文章 名 称 。 如 果 在 文档 中 使 用 了 <cite> 元 素 ， 被 标记 的 文档 内 容 将 以 斜体 的 样式 展示 


在 页 面 中 ， 以 区 别 于 段落 中 的 其 他 字符 。 
下 面 通过 一 个 具体 实例 讲解 在 网 页 中 突出 显示 某 些 文字 的 方法 。 
实例 3-13 说 明 
源码 路 径 \daima\3\13.html 
功能 在 网 页 中 突出 显示 某 些 文字 


在 本 实例 中 ， 首 先 使 用 <h5> 元 素 创 建 
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个 标题 “理想 是 什么 ? 是 面包 ” 然后 通过 <p> 元 


mim MAESTE! 


素 对 标题 进行 阐述 。 为 了 引起 用 户 对 重要 内 容 的 注意 , 使 用 <mark> 元 素 高 亮 处 理 字 符 “ 面 包 和 < 
“大 山 ” 和 “天 知道 >” 实例 文件 13.html 的 代码 如 下 。 


</p> 
</body> 
</html> 
在 上 述 代 码 中 ， 使 用 <mark> 元 素 将 文字 中 的 “面包 入 “大 1 


<!DOCTYPE html> 
<html> 
<head> 
«meta charset-"utf-8" /> 
«title*mark 元 素 的 使 用 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<h5> 理 想 是 什么 ”是 <mark> 面 包 </mark></h5> 
<p class-"p3 5"> 
喜欢 大 海 吗 
还 是 喜欢 <mark> 大 山 </mark> 
<mark> 天 知道 </mark> 的 答案 ! 


行 了 高 亮 显示 的 处 理 。<mark> 元 素 的 这 种 高 亮 显 示 的 特征 ， 除 月 
用 于 查看 搜索 结果 页 面 中 关键 字 的 高 亮 显 示 ， 其 目的 主要 是 3 


图 3-22 所 示 。 


`+ == 
* . 
ta: 


不 一 样 的 。 


”和 “天 知道 ”三 个 字符 进 
于 文档 中 突出 显示 外 ， 还 常 


起 用 户 的 注意 。 执 行 效果 如 


z584? RIA 
喜欢 大 海 吗 还 是 喜欢 赤山 天 知道 的 答案 


图 3-22 执行 效果 


312 ”使 用 图 片 标记 元 素 


TE HTML 5 页 面 中 ， 除 了 显示 文档 或 字符 外 ， 还 经 常 需要 放 入 一 些 其 他 元 素 ， 例 如 图 片 
<img>、 页 面 <iframe> 和 多 媒体 <object> 等 。 这 些 元 素 对 于 整个 DOM 文档 来 说 ， 


容 。 其! 


<img> 元 素 的 功能 是 在 页 面 中 导入 一 幅 图 像 , 它 是 页 面 
素 。 在 HTML 5' 


些 功 能 需要 通过 CSS 样式 来 实现 。 


， 该 元 素 的 “border”“align”“hspace”“vspace” 属 性 不 


<mark> 元 素 在 使 用 效果 上 与 <em> 或 <strong> 元 素 有 相似 之 处 ， 但 三 者 的 出 发 点 是 
<strong> 元 素 是 作者 对 文档 中 某 段 文字 的 重要 性 进行 的 强调 ; <em> 元 素 是 为 了 突 
出 文章 的 重点 而 进行 的 设置 ; <mark> 元 素 是 数据 展示 时 ， 以 高 亮 的 形式 显示 某 些 


人 > 人 大 


字符 。 


ET HEN 


发 中 使 用 较为 频繁 的 一 个 元 


有 被 文 持 ， 这 
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在 HTML 4.01 F, 不 赞成 使 用 以 下 布局 属性 : "align". “border”, "hspace" fll *vspace". 
在 HTMLS 中 不 支持 这 些 属性 。<img> 元 素 的 主要 属性 如 表 3-6 所 示 。 


表 3-6 ” <img> 元 素 的 属性 


属 性 m Ho 3k 
alt text 规定 图 像 的 奉 代 文本 
src URL 规定 图 像 的 URL 
height Po 规定 图 像 的 高 度 
ismap a 把 图 像 设置 为 服务 器 端 图 像 映射 
usemap #mapname 把 图 像 设置 为 客户 端 图 像 映射 
width po 规定 图 像 的 宽度 
下 面 通过 一 个 具体 实例 讲解 在 网 页 中 显示 一 幅 图 片 的 方法 。 


实例 3-14 说 HJ 
源码 路 径 daima\3\14.html 
功能 在 网 页 中 显示 一 幅 图 片 


本 实例 的 功能 是 ， 使 用 <img> 元 素 在 网 页 中 显示 一 幅 图 片 ， 本 实例 的 图 片 素材 是 
“eg_tulip.jpg”。 实例 文件 14.html 的 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<body> 


<img src-"/i/eg tulipjpg" alt=" 上 海鲜 花 港 - 郁金香 " width="400" height="266" /> 


</body> 
</html> 


执行 效果 如 图 3-23 所 示 。 


Eozilla Firefox = D| x| 
XFO SBO SEV 历史 (3) 书签 @) IAW šQ 
(Pnn || pete omms] 2 ene nem > [t 


ESIFTEZT- el[&i-s& || & - *| é ms 
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3.13 ”使 用 框架 标记 元 素 


在 HTML 5 中 ，<iframe> 元 素 的 功能 是 在 页 面 中 创建 包含 另 一 文档 的 框架 。 出 于 对 页 国 
安全 性 的 考虑 ，HTML 5 不 再 支持 <frame> 框 架 元 素 ， 包 括 <frameset> 框 架 集 元 素 ， 但 仍然 文 
持 <iframe> 元 素 ， 只 是 该 元 素 的 一 些 原 有 属性 不 再 被 文 持 ， 而 仅仅 文 持 “src” 属 性 。 

众所周知 ， 当 使 用 <iframe> 元 素 包含 了 另 一 个 页 面 时 ， 这 一 操作 的 安全 性 会 让 开发 者 担 
忧 。 为 了 避免 这 个 问题 ， 在 HTML 5 中 新 增加 了 一 个 元 素 的 属性 “sandbox”， 通 过 该 属性 的 
设置 ， 可 以 避免 私自 访问 父 页面 、 执 行 异 样 脚 本 、 通 过 脚本 典 入 表单 或 控制 表单 。 属 性 
“sandbox” 有 如 下 4 个 属性 值 。 

口 allow-forms: 允许 脚本 内 入 自己 的 表单 或 操纵 表单 。 

口 allow-same-origin: 人 允许 将 租 入 内 容 视 为 同一 个 数据 源 。 

O allow-scripts: 允许 执行 脚本 。 

口 allow-top-navigation: 允许 使 用 最 外 层 浏 览 器 的 上 下 文 导 航 功 能 。 

在 具体 设置 时 ， 建 议 读 者 根据 实际 需求 选择 允许 的 操作 ， 从 而 有 效 避 免 <iframe> 元 素 奶 


Tun 


入 的 文档 有 安全 性 问题 。 

下 面 通过 一 个 实例 讲解 在 网 页 中 显示 一 个 文本 框架 的 方法 。 
实例 3-15 说 HJ 
源码 路 径 daima\3\15.html 

功能 在 网 页 中 显示 一 个 文本 框架 


本 实例 的 功能 是 ， 使 用 <iframe> 元 素 在 网 页 中 显示 一 个 文本 框架 。 实 例文 件 15.html 的 具 
体 代 码 如 下 。 
<IDOCTYPE html> 


<html> 
<body> 


<iframe src="http://www.w3schools.com"></iframe> 


</body> 
</html> 


执行 效果 如 图 3-24 所 示 。 


Mozilla Firefox = D| x| 
文件 到 REO SEQ mec) SEQ IAW EMW 
(esmen | 加 百度 搜索 Ja | omms 6e] Y aem x | 4 


£ G Q x [&i- 8 PJ @ -|| t| & J| iS |-]| 8$ 


正在 连接 到 www. google-analytics. com 


图 3-24 ”执行 效果 
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344 使 用 <0bject> 标 记 元 素 


Æ HTML 5 网 页 中 , 可 以 使 用 <objecf> 标 记 元 素 在 网 页 中 显示 一 个 Flash，<object> 元 素 的 


功能 是 定义 一 个 嵌入 的 对 象 。 使 用 此 元 素 可 以 向 用 户 的 XHTML 
行 用 户 规定 插入 HTML 文档 中 


的 对 象 的 数据 和 参数 ， 


以 及 可 


L 页 面 添加 多 媒体 ， 此 元 素 运 
香 来 显示 和 操作 数据 的 代码 。 


<object> Jt% HJ LL F <head> Jt <body> Jt A A Š. <object> 与 </object> 之 间 的 文本 
是 蔡 换 文本 ， 针 对 不 支持 此 标签 的 浏览 器 。<param> 标签 可 定义 用 于 对 象 的 “run-time” 设 置 。 


<object> 元 素 的 属性 信息 如 表 3-7 所 示 。 
43-7 ”<object> 元 素 的 属性 信息 
属 性 值 Hio 
left 
align Rd HTML 5 中 不 支持 
bottom 
archive URL HTML 5 中 不 支持 
border pixels HTML 5 中 不 支持 
classid class ID HTML 5 中 不 支持 
codebase URL HTML 5 中 不 支持 
codetype MIME type HTML 5 中 不 支持 
data URL 规定 对 象 使 用 的 资源 的 URL 
declare declare HTML 5 中 不 支持 
form form id 规定 对 象 所 属 的 一 个 或 多 个 表单 
height pixels 规定 对 象 的 高 度 
hspace pixels HTML 5 中 不 支持 
name name 为 对 象 定义 名 称 
standby text HTML 5 中 不 支持 
type MIME type 定义 data 属性 中 规定 的 数据 的 MIME 类 型 
usemap #mapname 规定 与 对 象 一 同 使 用 的 客户 端 图 像 映射 的 名 称 
vspace pixels HTML 5 中 不 支持 
width pixels 规定 对 象 的 宽度 


下 面 通过 一 个 实例 


Flash 文件 是 123.swf。 


解 使 用 <object> 元 素 在 网 页 中 显示 一 个 Flash 的 方法 。 本 实 


例 的 素材 


实例 3-16 O — HJ 
源码 路 径 daima\3\16.html 
功能 使 用 <object> 元 素 在 网 页 中 显示 一 个 flash 


实例 文件 16.html 的 具体 代码 如 下 。 
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<!DOCTYPE html> 


<html> 
<body> 


Wim MAESTE! 


«object data= "123.swf" type="all" 
width-"200px" height="200px"> 
</object> 


</body> 
</html> 


上 述 代码 按照 HTML 5 的 支持 特征 ， 设 置 了 <object> 元 素 的 关键 属性 “data” 值 。 如 果 按 
照 设 置 的 多 媒体 路 径 找 到 了 该 对 象 ， 在 支持 HTML 5 属性 的 浏览 器 中 可 以 实现 播放 多 媒体 文 


件 功 能 。 在 HTML 5 中 ， 新 增 了 专门 用 于 播放 多 媒体 文人 


Eo 


的 标签 一 一 <video> 元 素 与 <audio> 


元 素 。 前 者 用 于 播放 视频 或 影视 ， 后 者 用 于 播放 音频 文件 ， 这 两 个 元 素 的 实战 用 法 将 在 本 书 


后 面 的 章节 中 详 旨 


HTML 5 在 处 理 视频 或 音频 方面 的 强大 优势 。 执 行 后 的 效果 如 图 3-25 所 示 。 


介绍 。 


F 展 示 


<video> 元 素 与 <audio> 元 素 将 逐步 取代 <objecf 人 > 元素， 从 而 真 ] 


Mozilla Firefox = [D| xi 
HO REO SEV PO HEO IAO 帮助 
| 多 火狐 主页 x [|i] eese ome | C3 file://…25 .htm x | + 


Q9 ^ -c|[g- 8| e - f| ée iss i: 


ja ng 


i 


图 3-25 ”执行 效果 
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pb 


mu 


Hi 


表单 在 网 页 中 的 作用 非常 重要 ， 因 为 表单 
多 个 新 的 表单 输入 类 型 ， 通 过 这 些 新 特性 可 以 实现 更 好 的 输入 控 人 
具体 实例 来 演示 表单 元 素 的 使 用 方法 。 


41 表单 元 素 的 类 型 


HTML 5 中 包含 的 输入 类 型 有 : 


email 
url 
number 


range 


DODLDGOCD6oLU 


search 


口 


color 


4.1.1 email 类 型 


在 HTML 5 中 ,“email” 


中 的 “type” 


类 型 是 


REE 


AAE 


使 用 表单 元 系 


该 文本 框 与 其 他 文本 框 在 页 面 显示 时 


动 检测 文本 框 中 


单 时 ， 会 


信息 。 


在 提交 表单 之 前 不 会 检测 “email” 类 型 文本 框 的 


的 内 容 是 


没有 


TEST B 


是 实现 动态 网 页 的 基础 。 在 HTML 5 rf, di 


1⁄1 


Date pickers (date, month, week. time. datetime, datetime-local) 


了 件 地 址 的 输入 域 。 如 果 将 <input> 元 素 
类 型 设置 为 “email”， 将 在 页 面 中 创建 一 专门 用 于 输入 邮件 地 址 的 文本 输入 框 。 
区 别 ， 专 门 用 于 接收 电子 邮件 地 址 信 ， 
地址 格式 ， 如 果 不 符 则 提示 相应 错误 


B HRE 


内 容 是 否 为 室 ， 只 有 而 在 不 为 空 的 情况 


下 才 检 测 其 内 容 是 否 符合 标准 的 email 格式 。 如 果 该 元 素 的 “multiple” 属 性 设置 为 “true”， 
则 允许 用 户 输入 一 串 用 去 号 分 隔 的 电子 邮件 地 址 。 在 提交 表单 时 ， 会 自动 验证 “email” 域 中 
的 值 是 否 合法 。 
下 面 通过 一 个 实例 讲解 验证 邮件 地 址 是 否 合 法 的 方法 。 
实例 4-1 说 W 
源码 路 径 daimaMM html 
功能 验证 邮件 地 址 是 否 合法 


在 本 实例 的 表单 页 面 ! 


m 


日 还 新 建 了 一 个 表单 提交 按钮， 


M, 


FE 击 “ 提 交 ” 按 钮 时 会 自动 检测 “email” 类 型 的 文本 框 


， 加 入 了 一 个 “email” 类 型 的 <input> 元 素 ， 功 能 是 输入 邮件 地 址 。 


FH 
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中 输入 的 字符 是 否 符合 邮件 格式 ， 如 果 不 符 则 显示 错误 提示 信息 。 
实例 文件 1.html 的 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title> 使 用 email</title> 

<link href="css.css" rel="stylesheet" type="text/css"> 

</head> 

<body> 

<form id="frmTmp"> 

<fieldset> 

<legend> 请 输入 合法 的 邮件 地 址 : </legend> 
«input name-"txtEmail" type-"email" 


class-"inputtxt" multiple-"true" 
«input name-"frmSubmit" type="submit" 
class-"inputbtn" value-" Ji A2" 
</fieldset> 
</form> 
</body> 
</html> 


在 上 述 代码 中 ， 将 <input> 元 素 “multiple” 的 属性 值 设 置 为 “true”， 当 在 Chrome 10 浏览 
器 中 单 击 “ 提 交 ” 按 钮 时 ， 显 示 的 提示 信息 为 “请 输入 用 逗号 分 隔 的 电子 邮件 地 址 的 列表 ”( 如 
果 不 设 置 该 属性 值 ， 则 不 会 显示 任何 提示 信息 )。 执 行 效果 如 图 4-1 所 示 。 


-请 输入 合法 的 邮件 地 址 ; — 
11| 提交 


四 SOM 电子 邮件 地 址 的 列 


图 4-1 执行 效果 
为 了 表现 上 述 网 页 的 美观 性 ， 特 意 编写 了 CSS 样式 文件 css.css， 具 体 代码 如 下 。 


(Q)charset "utf-8"; 

/* CSS Document */ 

body í 
font-size:12px 


} 
.inputbtn í 
border:solid 1px #ccc; 
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background-color:#eee; 
line-height:18px; 
font-size:12px 


} 

.inputtxt í 
border:solid 1px #ccc; 
padding:3px; 
line-height: 18px; 
font-size: 12px; 
width:160px 

} 

fieldset{ 
padding: 10px; 
width:280px; 
float:left 

} 

#spnColor{ 
width:150px; 
float:left 

} 

#spnPrev{ 
width:100px; 
height:70px; 
border:solid 1px #ccc; 
float:right 

} 

#pColor{ 
font-weight:bold; 
clear:both; 
text-align:center 

j 

pi 
clear:both; 
padding:Opx; 

margin:8px; 

} 

.p. center( 
text-align:center 

} 

.p_colorí 
color:#666 

J 


4.1.2 url 类 型 


在 全 新 的 HIML 5 中 ,“url” 类 型 是 


指 包含 URL 地 址 的 输入 域 。 在 提交 表单 时 ， 会 自动 


验证 “url” 域 中 的 值 。 在 输入 元 素 <input> 中 ,“url” 类 型 是 一 种 新 增 的 类 型 , 该 类 型 表示 <input> 
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元 素 是 一 个 专门 用 于 输入 Web 站 点 地 址 的 输入 框 。Web 地 址 的 格式 与 普通 文本 有 些 区 别 ， 例 
如 文本 中 有 有 反 斜 杜 “/” 和 点 “.”。 为 了 确保 “url” 类 型 的 输入 框 能 够 正确 提交 符合 格式 的 内 
容 ， 表 单 在 提交 数据 前 会 自动 验证 其 内 容 格式 的 有 效 性 。 如 果 不 符合 对 应 的 格式 ， 则 会 出 现 
相应 的 错误 提示 信息 。 并 且 与 “email” 类 型 一 样 ,，“url” 的 有 效 性 检测 并 不 会 判断 输入 框 的 
内 容 是 否 为 空 ， 而 是 针对 非 空 的 内 容 进行 格式 检测 。 

下 面 ， 通 过 一 个 实例 讲解 验证 输入 的 是 否 是 一 个 URL 地 址 的 方法 。 


实例 4-2 说 明 
源码 路 径 daima\4\2.html 
功能 验证 输入 的 是 否 是 一 个 URL 地 址 


在 本 实例 中 ， 首 先 创建 了 一 个 “url” 类 型 的 <input> 元 素 ， 然 后 新 建 了 一 个 表单 “提交 ” 
按钮 。 当 单 击 “ 提 交 ” 按 钮 时 ， 会 自动 检测 输入 框 中 的 元 素 是 否 符合 Web 地 址 格式 ， 如 果 不 
是 合法 的 URL， 则 显示 错误 提示 信息 。 实 例文 件 2.html 的 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title> 使 用 url 类 型 <jtitle> 

<link href-"css.css" rel="stylesheet" type="text/css"> 

</head> 

<body> 

<form id="frmTmp"> 

<fieldset> 

<legend> 请 输入 网 址 : </legend> 
«input name="txtUrl" type-"url" 


class-"inputtxt" /> 
«input name-"frmSubmit" type="submit" 
class-"inputbtn" value=" 提 交 " /> 
</fieldset> 
</form> 
</body> 
</html> 


在 上 述 代 码 中 ， 将 文本 框 的 “type” 属 性 设置 为 “url”， 浏 览 器 将 自动 检验 文本 框 中 
的 内 容 是 否 符 合 “url” 的 格式 ， 如 果 不 符 则 弹出 提示 信息 。 在 此 需要 说 明 的 是 ， 目 前 对 
<input> 元 素 新 增 类 型 提供 支持 的 只 有 Chrome 10 与 Opera 11 浏览 器 ， 其 他 浏览 器 暂时 还 
不 支持 , 而 这 两 个 浏览 器 对 “url” 类 型 的 <input> 元 素 在 页 面 展 示 时 , 效果 并 不 一 样 。 Chrome 
10 浏览 器 必须 输入 完整 的 URL 地 址 路 径 ( 包 括 “http:/”), 并 不 介意 前 面 有 空格 ; 而 Opera 
11 浏览 器 不 必 输 入 完整 的 URL 地 址 路 径 ， 提 交 时 自动 会 在 前 面 添加 ， 但 是 介意 开始 处 是 
否 有 空格 ， 如 果 文 本 输入 框 中 的 开始 处 有 空格 ,将 提示 格式 出 错 信息 。 执 行 效果 如 图 4-2 
所 示 。 
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= — jag 


| 加 请 输入 网 址 。 


图 4-2 执行 效果 


4.1.3 number 类 型 
在 HTML 5 中 ,“number” 类 型 是 用 于 设置 包含 数值 的 输入 域 。 通 过 “number” 类 型 能 够 
对 所 接受 的 数字 进行 限定 。 用 户 可 以 使 用 表 4-1 所 示 的 属性 来 规定 对 数字 类 型 的 限定 。 


表 4-1 number 类 型 支持 的 属性 


Hood fi 描述 
max number 规定 允许 的 最 大 值 
min number 规定 允许 的 最 小 值 
step number 规定 合法 的 数字 间隔 ， 如 果 step="3"， 则 合法 的 数 是 -3,0,3,6 等 
value number 规定 默认 值 
在 HTML 4 以 前 的 版 本 中 ， 如 果 想 要 在 表单 中 输入 一 个 指定 范围 的 整数 ， 需 要 在 表单 提 


交 前 使 用 代码 进行 数据 检测 ， 以 确定 输入 框 中 是 否 是 一 个 符合 要 求 的 整数 。 而 在 HTML 5 中 ， 
只 要 创建 一 个 “number” 类 型 的 <input> 元 素 ， 便 可 以 实现 以 上 操作 。 该 类 型 的 元 素 在 HTML 
5 中 还 将 显示 一 个 微调 控件 , 如 果 指 定 了 最 大 与 最 小 范围 值 , 就 可 以 点 击 微调 控件 的 上 限 与 下 
限 按钮 ， 以 指定 的 步 长 ( step) 增 加 或 减少 输入 框 中 的 值 ， 极 大 方便 了 用 户 的 操作 。 

在 “number” 类 型 的 输入 框 中 ， 用 户 不 能 输入 其 他 非 数字 型 的 字符 ， 并 且 当 输入 的 数字 
大 于 设 定 的 最 大 值 或 小 于 设置 的 最 小 值 时 ， 都 将 出 现 数字 输入 出 错 的 提示 信息 。 同 样 道理， 
该 类 型 不 进行 输入 内 容 是 否 为 空 值 的 自动 检测 。 
下 面 通过 一 个 实例 讲解 验证 输入 的 数值 是 否 合法 的 方法 。 


实例 4-3 说 HJ 
源码 路 径 daima\4\3.html 
功能 验证 输入 的 数值 是 否 合法 


在 本 实例 中 创建 了 三 个 表单 ， 创 建 了 三 个 “number” 类 型 的 <input> 元 素 ， 分 别 用 于 输入 
日 期 中 “年 *”“ 月 ”“ 日 ”的 数字 。 同 时 ， 还 新 建 一 个 表单 的 “提交 ”按钮 。 单 击 该 按钮 时 会 
检测 这 三 个 输入 框 中 的 数字 是 否 属于 各 自 设 置 的 整数 范围 , 如 果 不 符合 则 显示 错误 提示 信息 。 
实例 文件 3.html 的 代码 如 下 。 


<!DOCTYPE html> 


Ü 


<html> 


64 BH 


第 4 章 使 用 表单 元 素 站 


<head> 
«meta charset-"utf-8" /> 
«title» H] number 类 型 </title> 
<link href-"css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<form id="frmTmp"> 
<fieldset> 
<legend> 输 入 您 的 初恋 时 间 : </legend> 
<input name="txtYear" type="number" 
class-"inputtxt" min-"1960" max="1990" 
step-"1" value-"1990" /> 年 
«input name-"txtMonth" type-"number" 


class-"inputtxt" min-"1" max-"12" 
step-"1" value-"4"/» H 
«input name-"txtDay" type-"number" 
class-"inputtxt" min-"1" max-"31" 
step-"1" value="23"/> H 
«input name-"frmSubmit" LO 
class-"inputbtn" value-" T4 ^7" / 
</fieldset> 
</form> 
</body> 
</html> 


在 上 述 代码 中 ， 定 义 了 三 个 “number” 类 型 的 <input> 元 素 输入 框 ， 分 别 用 于 设置 “mm” 
max”“value”“step” 属 性 值 。 其 中 “step” 属 性 值 表 示 步 长 值 ， 默 认 值 为 1， 表示 当 用 户 点 
和 微调 控件 时 ， 向 上 增加 或 向 下 减少 的 值 。 所 有 这 些 属 性 值 都 是 可 选项 ， 如 果 不 需 要 指定 数 
字 上 限 则 可 以 省 略 “max” 属 性 。 

运行 上 述 代 码 后 ， 如 果 输 入 框 微 调控 件 中 的 数字 不 能 向 上 调 ， 则 向 上 箭头 按钮 变 灰 ， 表 
示 不 可 用 ， 向 下 箭头 则 变 为 可 用 。 反 之 向 下 箭头 变 为 灰色 ， 表 示 不 可 用 ， 向 上 箭头 则 变 为 可 
用 。 执 行 效果 如 图 4-3 所 示 。 


输入 您 的 初恋 时 间 ; 


E: 


1900| m 


B 信 必 须 大 于 或 等 于 1960. 
mrt 


图 4-3 ”执行 效果 


4.1.4 range 类 型 


ft HTML 5 中,“range” 类 型 能 够 实现 滑动 条 效果 。 在 网 页 中 ,“range” 类 型 显示 为 滑动 
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条 的 样式 ， 用 户 可 以 限定 所 接受 的 数字 。 可 以 使 用 下 面 表 4-2 中 的 属性 来 设置 对 数字 类 型 的 


限定 。 
表 4-2 range 类 型 支持 的 属性 
属 性 值 描 述 
max number 疯 定 允许 的 最 大 值 
min number 纲 定 允许 的 最 小 值 
step number 纲 定 合法 的 数字 间隔 ， 如 果 step="3"， 则 合法 的 数 是 -3，0，3，56 等 
value number 网 定 默认 值 


如 果 要 在 HTML 5 ! 


“range” 类 型 。 这 两 种 数字 类 型 的 <input> 元 素 基 本 属性 都 一 样 ， 唯 一 不 同 在 于 页 面 中 的 展示 
形式 。“number” 类 型 在 页 面 中 以 输入 框 添加 了 微调 
式 展示 数字 ， 通 过 拖 动 滑 块 实现 数字 的 改变 。 

下 面 通过 一 个 实例 讲解 通过 滑动 条 设置 颜色 的 方法 。 


输入 整数 ， 除 了 使 用 前 面 介绍 过 的 


“number” 类 型 外 ， 还 可 以 使 月 


ZH un 


7 


yx 牛 ， 而 “range” 类 型 则 以 滑动 条 的 É 


实例 4-4 说 — HJ 
源码 路 径 daimaMM.html 
功能 通过 滑动 条 设置 颜色 


在 本 实例 中 ， 首 先 新 建 了 三 个 页 面 表 单 ， 分 别 为 其 创建 
的 “红色 ” (r). “绿色 ” (g). “1 


素 ， 分 别 用 于 设置 颜色 ， 


素 ， 用 于 展示 滑动 条 改变 


时 的 颜色 区 。 当 用 户 任意 拖 动 某 个 


色 区 背景 色 都 会 随 之 发 生变 化 ， 同 时 ， 颜 色 区 下 面 显示 对 应 上 


的 具体 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 


了 三 个 “range” 类 型 的 <input> 元 
色 ”(b)。 另 外 ， 新 建 一 个 <p> 元 
绑 定 颜色 的 滑动 条 时 ， 对 应 的 颜 
XAR. rgb )。 实 例文 件 4html 


«meta charset-"utf-8" /> 
«title» H] range 类 型 </title> 


<link href-"css.css" 


rel="stylesheet" type="text/css"> 


<script type="text/javascript" language="javascript" 
sre="js4.js"> 

</script> 

</head> 


<body> 


<form id="frmTmp" 


<fieldset> 


= 


<legend> 请 选择 颜色 值 : </legend> 


«span id="spnColor"> 


«input id—"txtR" type-"range" value="0" 


min-"0" max-"255" onChange-"setSpnColor()" > 
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«input id="txtG" type-"range" value="0" 
min-"0" max-"255" onChange="setSpnColor()"> 
«input id—"txtB" type-"range" value-"0" 
min-"0" max-"255" onChange-"setSpnColor()"— 
</span> 
«span id="spnPrev"></span> 
«P id="pColor">rgb(0,0,0)</P> 
</fieldset> 
</form> 
</body> 
</html> 
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在 上 述 代码 中 ， 分 别 使 用 “range” 类 型 定义 了 三 个 <input> 元 素 ， 这 些 元 素 都 以 滑动 条 的 
形式 展示 在 页 面 中 。 当 拖 动 滑 块 时 ， 将 触发 JavaScript 的 一 个 自 定义 函数 setSpnColor(), HERK 


数 可 以 根据 获取 滑动 条 的 值 ， 动 态 地 改变 颜色 块 的 背景 色 。 
脚本 文件 js4js 的 代码 如 下 所 示 。 


// JavaScript Document 
function $$(id)( 
return document.getElementByld(id); 
} 
// 定 义 变量 
var intR,intG,intB,strColor; 
/根据 获取 变化 的 值 ， 设 置 预览 方块 的 背景 色 函 数 
function setSpnColor() ( 
intR-$$("txtR").value; 
intG-$$("txtG").value; 
intB-$$("txtB").value; 
strColor="rgb("+intR+","+intG+","+intB+")"; 
$$("pColor").innerHTML=strColor; 
$$("spnPrev").style.backeroundColor=strColor; 


} 
/初始 化 预览 方块 的 背景 
setSpnColor(); 


执行 后 的 初始 效果 如 图 4-4 所 示 ， 滑 动 三 个 滑 条 可 以 设置 不 同 的 颜色 ， 并 且 在 右 侧 区 域 


预览 显示 颜色 。 如 图 4-5 所 示 。 


请 选择 颜色 值 : 请 选择 颜色 值 : 
rgb (0, 0, 0) rgb (0, 13, 136) 
图 4-4 初始 效果 图 4-5 通过 滑动 条 预览 颜色 
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出 器 〉 可 以 为 用 户 提 供 日 


期 和 时 间 输 入 框 。 


能 够 大 大 提高 处 理 数 据 的 效率 。 


在 HIML 5! 


期 的 文本 输入 框 ， 用 户 需 要 专门 编写 大 


在 HIML 5 中 ， 只 需要 将 


4.1.5 Date Pickers 〈 数 据 检 出 器 ) 
1E HTML 5 中 ， 使 用 “Date Pickers”( 数 据 检 
这 样 可 以 避免 用 打字 的 方式 输入 日 期 和 时 间 ， 
提供 了 多 个 可 供 选取 日 期 和 时 间 的 数据 检 出 器 。 具 体 说 明 如 下 。 
口 date: 选取 日 、 月 、 年 。 
口 month: 选取 月 、 年 。 
口 week: 选取 周 和 年 。 
O time: 选取 时 间 《 小 时 和 分 钟 )。 
C] datetime: 选取 时 间 、 日 、 月 、 年 (UTC 时 间 )。 
口 datetime-local: 选取 时 间 、 日 、 月 、 年 (本 地 时 间 )。 
在 HTML 4 之 前 的 版 本 中 ， 没 有 专门 用 于 显示 日 
量 的 JavaScript 代码 或 导入 相应 的 插件 ， 整 个 实现 过 程 
<input> 元 素 的 类 型 设置 为 “date”， 便 可 以 创建 一 个 日 期 给 


。 当 单 击 该 文本 框 时 ， 会 弹出 


个 日 历 选择 器 ， 选 择 日 期 并 关闭 这 个 框 ， 人 
下 面 通过 一 个 实例 讲解 自动 弹出 日 期 和 时 间 输 入 框 供用 户 选择 的 方法 。 
实例 45 说 
源码 路 径 daima\A\5.html 
功能 动弹 出 日 期 和 时 间 输 入 框 供用 户 选 择 
在 本 实例 的 页 面 表单 中 ， 分 三 组 创建 6 个 不 同 展示 形式 的 日 期 类 型 输入 框 。 
口 第 一 组 : 显示 “日 期 ”与 “时 间 ” 类 型 ， 展 示 类 型 为 “date” 与 “time” 值 的 日 期 输 
入 框 。 
口 第 二 组 : 显示“ 月份” 与 “星期 ”类 型 ， 展 示 类 型 为 “month” 与 “week” 值 的 日 期 
输入 框 。 
O 第 三 组 : 显示 “日 期 时 间 ” 型 ， 分 别 展示 类 型 为 “datetime” 与 “datetime-local” 值 的 


日 期 输入 框 。 当 提交 所 有 输入 框 中 的 数据 时 ， 都 将 对 输入 的 日 期 或 时 间 进 行 有 效 性 检 


测 ， 如 果 不 符 将 弹出 提示 信息 。 


实例 文件 5.html 的 代码 如 下 。 
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<!DOCTYPE html> 
<html> 
<head> 
«meta charset-"utf-8" /> 
<title> 选 择 日 期 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<form id="frmTmp"> 
<fieldset> 


<legend> 日 期 + 时 间 类 型 ; </legend> 
«input name-"txtDate 1" type-"date" 


class-"inputtxt" 
«input name-"txtDate 2" type-"time" 
class-"inputtxt" 
«/fieldset 
«fieldset 
<legend> 月 份 + 星 期 类 型 : «legend» 
«input name-"txtDate 3" type="month" 


class-"inputtxt" 
«input name-"txtDate 4" type-" week" 
class-"inputtxt" 
</fieldset> 
<fieldset> 
<legend> 日 期 + 时 间 型 : </legend> 
«input name-"txtDate 5" type="datetime" 


class-"inputtxt" 
«input name-"txtDate 6" type-"datetime-local" 
class-"inputtxt" 
«/fieldset 
</form> 
</body> 
</html> 


在 上 述 代 码 中 , “datetime ”类 型 是 专门 用 于 UTC 
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日 期 与 时 间 的 输入 文本 框 ， 而 


“datetime-local” 类 型 则 是 用 于 本 地 日 期 与 时 间 的 输入 文本 框 ， 默 认 值 为 本 地 的 日 期 与 时 间 。 
另外 在 “week” 类 型 的 输入 文本 框 中 ， 如 果 值 为 “2014-W10” 则 表示 在 2014 年 的 第 10 个 


国 
El 


星期 ， 以 此 类 推 ， 该 星期 的 值 表示 当年 的 第 几 个 星期 。 执 行 效果 如 图 4-6 所 示 。 
厂 日 期 + 时 间 类 型 : 月 份 + 星期 类 型 : 

El 

m= E 7.8. [2012 2 

z J 一 二 三 四 五 六 日 

日 期 + 时 间 型 : 7 11 2 

司 : Š MANE 

s 3 ze 

M25 25 27 í 29 30 

今天 


图 4-6 Opera 浏览 器 的 执行 效果 


如 果 在 Chrome 浏览 器 中 运行 上 述 程序 ， 则 不 能 弹 ! 


LC 


日 期 {4 时间 类 型 ; 一 一 一 一 一 一 一 一 一 一 一 一 三 月 份 + 星期 类 型 ; 


| 


期 选择 器 。 如 图 4-7 所 示 。 


厂 日 期 + 时 间 型 ; 


图 4-7 Chrome 浏览 器 的 执行 效果 
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4.1.6 search 类 型 


fr HTML 5 中 ,通过 “search” 类 型 可 以 实现 一 个 搜索 域 ， 比 如 站 点 搜索 或 Google 搜索 、 
百度 搜索 。“search” 域 显示 为 常规 的 文本 域 。“search” 类 型 的 <input> 元 素 专 门 用 于 关键 字 的 
查询 ， 该 类 型 的 输入 框 与 “text” 类 型 的 输入 框 在 功能 上 没有 太 大 的 区 别 ， 都 是 用 于 接收 用 户 
输入 的 查询 关键 字 。 但 是 在 页 面 展 示 时 却 有 少许 的 区 别 。 在 Chrome 与 Safari 浏览 器 中 ， 在 输 
入 框 中 填写 内 容 时 ， 输 入 框 的 右 侧 将 会 出 现 一 个 “x ”按钮 ， 单 击 该 按钮 时 会 清空 在 输入 框 
中 的 内 容 。 


下 面 通过 一 个 实例 讲解 显示 文本 框 中 的 搜索 关键 字 的 方法 。 
实例 4-6 说 — UJ 
源码 路 径 daima\4\6.html 

功能 显示 文本 框 中 的 搜索 关键 字 


在 本 实例 的 表单 中 ， 增 加 了 一 个 “search” 类 型 的 <input> 元 素 ， 功 能 是 用 于 输入 查询 关 
键 字 。 然 后 为 此 表单 增加 一 个 “提交 ”按钮 ， 当 单 击 按钮 时 显示 输入 的 关键 字 内 容 。 实 例文 
ft: 6.html 的 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title>search 类 型 的 input 元 素 </title> 

<link href-"css.css" rel="stylesheet" type="text/css"> 


<script type="text/javascript" language="javascript" 
src="Js6.Js"> 
</script> 
</head> 
<body> 
«form id-"frmTmp" onSubmit-"return ShowKeyWord();" 
«fieldset^ 


<legend> 请 输入 搜索 关键 字 : «legend» 
«input id="txtKey Word" type="search" 
class="inputtxt"> 
<input name="frmSubmit" type="submit" 
class="inputbtn" value=" 提 交 '"> 
</fieldset> 
<p id="pTip"></p> 
</form> 
</body> 
</html> 


在 上 述 代 码 中 ， 在 表单 提交 时 为 了 获取 “search” 类 型 的 <inpu 人 > 输入 框 的 值 ， 在 表单 的 
“onSubmit” 事 件 中 ， 调 用 了 一 个 JavaScript 自 定 义 函 数 ShowKeyWord0。 在 自 定义 函数 
ShowKeyWord() 中 ， 先 获取 查询 输入 框 的 值 ， 然 后 将 该 值 设置 为 展示 元 素 <p> 的 内 容 ， 并 通过 
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“retum false” 方 法 终止 表单 提交 的 过 程 ， 最 后 显示 该 函数 执行 结果 。 
上 述 代 码 调用 了 脚本 文件 js6js， 此 文件 的 代码 如 下 。 


// JavaScript Document 

function $$(id) í 
return document.getElementById(id); 

j 

/将 获取 的 内 容 显示 在 页 面 中 

function ShowKeyWord(){ 
var strTmp="<b> 亲 ， 您 输入 的 查询 关键 字 是 一 一 </b>"; 
strTmp=strTmp+$$('txtKeyWord').value; 
$$('pTip').innerHTML=strTmp; 
return false; 


} 


执行 效果 如 图 4-8 所 示 。 在 文本 框 中 输入 关键 字 ， 单 击 “ 提 交 ” 按 钮 后 将 在 下 方 显 示 输 
入 的 关键 字 ， 如 图 4-9 所 示 。 


J) sear ch 类 型 的 input 元 素 - Mozilla Firefox = [D| x| 


wO dag) SEVU mec) HES) TAW # 


€” Q c|- PIMENEE 


一 请 输入 搜索 关键 字 : 
de 
请 输入 搜索 关键 字 : 
HTML 5 
F, 你 输入 的 查询 关键 字 是 一 一 ML 5 
图 4-8 执行 效果 图 4-9 显示 输入 的 关键 字 


在 Chrome 与 Safari 浏览 器 中 , 在 输入 框 中 填写 内 容 时 , 输入 框 的 右 侧 将 会 出 现 一 个 “x” 
按钮 ， 如 图 4-10 所 示 。 当 单 击 “xX” 按钮 时 会 清空 在 输入 框 中 的 内 容 ， 如 图 4-11 所 示 。 


— | 


r 


图 4-10 E7 “x” 图 4-11 清空 文字 
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42 ”表单 元 素 中 的 属性 


除了 本 章 4.1 中 介绍 的 表单 类 型 外 ， 在 HTML 5 页 面 中 还 可 以 使 用 属性 来 实现 用 户 需 要 
的 显示 功能 。 本 节 将 详细 讲解 和 HTML 5 表单 相关 的 几 个 属性 ， 并 通过 具体 实例 来 讲解 其 实 


4.2.1 _ 记 住 表单 中 的 数据 

在 HTML 5 的 <input> 元 素 中 ， 属 性 “autofocus” 是 一 个 布尔 值 。 主 要 功能 是 当 加 载 页 面 
完成 后 , 设置 光标 是 否 自 动 锁定 <inpu 亿 元 素 , 即 是 否 使 元 素 自 动 获取 焦点 。 在 <input> 元 素 中 ， 
如 果 将 该 属性 的 值 设置 为 “true” 或 直接 输入 “autofocus” 属 性 名 称 ， 那 么 对 应 的 元 素 将 自动 
获取 焦点 。 


HH <“ 


其 实 “autofocus” 属 性 是 HTML 5 新 增 的 属性 ， 除 了 此 属性 外 ， 还 新 增 了 如 下 表单 


` 


属性 。 
(1) 新 的 “form” 属 性 


口 autocomplete 


L] novalidate 
(2) 新 的 “input” 属 性 


autocomplete 


autofocus 

form 

form overrides (formaction. formenctype. formmethod. formnovalidate, formtarget) 
height 和 width 

list 

min. max 和 step 

multiple 

pattern (regexp) 

placeholder 


D D D D O D O D DO LU 


required 


下 面 通过 一 个 实例 讲解 记 住 表单 中 的 数据 的 方法 。 


T 


实例 4-7 说 sg 
源码 路 径 daimaM V/.html 
功能 记 住 表单 中 的 数据 


在 本 实例 的 表单 中 创建 了 两 个 文本 输入 框 ， 一 个 用 于 输入 “姓名 ” 另 一 个 用 于 输入 “ 密 
f". 为 输入 “姓名 ”的 文本 框 设置 “autofocus” 属 性 ， 当 成 功 加 载 页 面 或 单 击 表单 “提交 ” 
按钮 后 ， 拥 有 “autofocus” 属 性 的 “姓名 ”输入 文本 框 会 自动 获取 焦点 。 实 例文 件 7.html 的 
代码 如 下 。 
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<!DOCTYPE html> 
<html> 
<head> 
«meta charset-"utf-8" /> 
<title> 使 用 autofocus 属性 </title> 
<link href-"css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
«form id="frmTmp"> 
<fieldset> 
<legend> 属 性 autofocus</legend> 
<p> 姓 名 : <inputtype="text" name-"txtName" 
class-"inputtxt" autofocus="true"></p> 


<p> 密 码 : <input type="password" name-"txtPws" 
class="inputtxt" ></p> 
<p class="p_center"> 
<input name="frmSubmit" p ud 
class-"inputbtn" value=" 提 交 " / 
«input name-"frmReset" type-"reset" 
class-"inputbtn" value=" 取 消 " /> 
</p> 
</fieldset> 
</form> 
</body> 
</html> 


执行 后 首先 显示 两 个 表单 ， 如 图 4-12 所 示 。 
假如 输入 姓名 “aaa”， 密 码 “111”， 单 击 “ 提 交 ” 按 钮 后 会 弹出 是 
如 图 4-13 所 示 。 


和 否 保存 信息 的 选项 ， 


O 你 是 百 想 要 密码 管 ... 厂 羽 为 此 页 面 保存 先 ; | 保存 | 从 不 X 完成 


属性 autofocus 


输入 姓名 : | 
输入 密码 : I 
属性 autofocus Eze 
姓名 : | 
EE 
de 取消 
O @ : € 缩放 (120%) 一 
图 4-12 执行 效果 图 4-13 是否 保存 信息 


如 果 选 择 “ 保 存 ”， 则 当下 次 打开 这 个 网 页 时 ， 将 在 表单 中 自动 输入 姓名 和 和 密码。 如 


图 4-14 所 示 。 
其 实在 传统 的 在 HTML 4 中 ， 如 果 要 使 某 个 元 素 自 动 获取 焦点 ,需要 


X 


代码 来 实现 。 虽 然 这 一 功能 的 实现 方便 了 用 户 的 操作 ， 但 也 带 来 了 不 少 > 的 次 


特意 编写 JavaScript 


端 ， 例 如 需要 通 
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过 按 空 格 键 滚 动 页 面 时 , 如 果 焦 点 还 在 表单 的 输入 文 


本 框 中 , 输入 的 空格 就 只 能 显示 在 文本 框 中 ， 而 不 能 | pentos 


实现 页 面 的 滚动 。 
在 HTML 5 中 ,| 


于 实现 这 一 功能 的 不 再 是 [| aam. 
JavaScript 代码 ， 而 是 元 素 的 属性 ， 所 以 所 有 页 面 实 
现 该 功能 的 方法 都 是 一 致 的 , 避免 了 由 于 代码 实现 的 


der RH 


不 同 而 效果 不 一 样 的 情况 。 | 
只 对 一 个 输入 框 设置 “autofocus” 属 性 ， 例 如 在 资料 4.14 在 表单 中 自动 输入 姓名 和 密码 


在 一 个 页 面 表单 


， 建 议 


输入 页 面 中 ， 只 对 第 一 个 文本 输入 框 设置 “autofocus” 属 性 。 


4.2.2 ”验证 表单 中 输入 的 数据 是 否 合法 


TE HTML 5 网 页 中 ， 可 以 验证 在 表单 中 输入 的 数据 是 否 合法 ， 此 功能 是 通过 “pattern” 


属性 实现 的 。 在 HTML 5 中 ,“pattern” 属 性 用 于 验证 input HIJRI (pattern), “pattern” JE 


性 适用 于 以 下 类 型 的 <inpu 亿 标签 : 


Ü text 
search 
url 
telephone 


email 


DOODO 


password 


在 <input> 元 素 中 ,“pattern” 是 <input> 的 验证 属性 。 使 用 该 属性 中 的 正则 表达 式 ， 可 以 验 


证 文本 输入 框 中 的 内 容 。“email>、“url” 等 类 型 的 <input> 元 素 都 内 置 了 正则 表达 式 ， 当 创建 


这 些 元 素 时 ， 通 过 与 内 容 进 行 丐 配 的 方式 进行 有 效 性 验证 。 其 实 这 些 元 素 都 使 用 了 “pattern” 
属性 ， 只 是 内 置 的 而 已 。 但 是 由 于 内 置 验证 的 元 素 较 少 ， 所 以 如 果 要 进行 组 合式 的 验证 ， 就 


需要 使 用 “pattem” 属 性 。 该 属性 支持 各 种 类 型 的 组 合 正则 表达 式 ， 用 来 验证 对 应 的 文本 输入 


框 中 的 内 容 。 
下 面 通过 一 个 实例 讲解 验证 表单 中 输入 的 数据 是 否 合法 的 方法 。 
实例 4-8 说 HJ 
源码 路 径 daima\4\8.html 
功能 验证 表单 中 输入 的 数据 是 否 合法 


在 本 实例 中 ， 首 先 在 表单 中 创建 一 个 “text” 类 型 的 <inpu 信 元素， 用 于 输入 “用 户 名 ”， 
并 设置 元 素 的 “pattem” 属 性， 其 值 为 一 个 正则 表达 式 ， 用 来 验证 “用 户 名 ”是 否 符合 “必须 


以 字母 开头 ,包含 字符 或 数字 和 下 画 线 ， 长 度 在 6 一 8 个 字符 之 间 ” 的 规定 。 单 击 表单 “提交 ” 


按钮 时 ， 输 入 框 中 的 内 容 与 表达 式 进 行 匹配 ， 如 果 不 符 ， 则 提示 错误 信息 。 实 例文 件 8.html 


的 具体 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 
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<meta charset="utf-8" /> 
<title> 使 用 pattern 属性 </title> 
<link href-"css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<form id="frmTmp"> 
<fieldset> 
<legend> 使 用 pattern 属性: </legend> 
用 户 名 : 
<input name="txtAge" type="text" 
class="inputtxt" pattern-"^[a-zA-Z]W (5,7) $" /> 
«input name-"frmSubmit" type="submit" 
class-"inputbtn" value-" T A2" /> 
Xp class-"p color" 
必须 以 字母 开头 ,包含 字符 或 数字 和 下 划 线 ,长 度 在 6-8 个 字符 之 间 
</p> 
</fieldset> 
</form> 
</body> 
</html> 


在 上 述 <input> 元 素 中 ， 所 有 的 输入 框 类 型 都 支持 “pattermn ”属性 ， 在 使 用 时 只 要 在 输入 
框 中 添加 一 个 “pattem ”属性 即 可 通过 属性 中 各 种 组 合 类 型 的 正则 表达 式 验 证 输入 框 中 的 内 容 。 
到 笔者 写 此 书 时 为 止 , 目前 只 有 Chrome 与 Opera 浏览 器 支持 该 属性 。 执行 后 的 效果 如 图 4-15 
所 示 。 


` 


使 用 pattern 屋 性 : 
RP: aaa| 提交 


mc D 请 与 所 请 求 的 格式 保持 一 到 


图 4-15 执行 效果 


4.2.3 ”在 文本 框 中 显示 提示 信息 
Æ HTML 5 网 页 中 , 属性 “placeholder” 能 够 为 用 户 提供 一 种 描述 输入 域 所 期 待 值 的 提示 。 
属性 “placeholder ”适用 于 <input> 标 签 的 “text”“search”“url”“telephone”“email” 以 及 
“password” 类 型 。 由 此 可 见 ，<inpu 人 元 素 中 的 “placeholder” 属 性 是 一 种 “ 占 位 ”属性 ， 其 
属性 值 是 一 种 “ 占 位 文本 。“ 占 位 文本 ”就 是 显示 在 输入 框 中 的 提示 信息 ， 当 输入 框 获取 焦 
点 时 ， 该 提示 信息 自动 消失 ， 当 输入 框 丢 失 焦 点 时 ， 提 示人 信息 又 重新 显示 。 
在 HTML 5 中 ,只 要 设置 元 素 的 “placeholder” 属 性 后 ,提示 会 在 输入 域 为 空 时 显示 出 现 ， 
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会 在 输入 域 获得 焦点 时 消失 。 下 面 通过 一 个 实例 讲解 在 文本 框 中 显示 提示 信息 的 方法 。 
实例 4-9 说 HJ 
源码 路 径 daima\4\9.html 
功能 在 文本 框 中 显示 提示 信息 
在 本 实例 中 创建 一 个 类 型 为 “email” 的 <input> 元 素 ， 设 置 该 元 素 的 “placeholder” 属 性 
值 为 “要 输入 正确 的 邮件 地 址 !”。 当 页 面 初 次 加 载 时 ， 该 元 素 的 占 位 文本 显示 在 输入 框 中， 
单 击 输入 框 时 占 位 文本 将 自动 消失 。 实 例文 件 9.html 的 代码 如 下 。 
<!DOCTYPE html> 
<html> 
<head> 
«meta charset-"utf-8" /> 
<title> 使 用 placeholder 属性 </title> 


<link href="css.css" rel="stylesheet" type="text/css"> 


</head> 
<body> 


<form id="frmTmp"> 
<fieldset> 
<legend> 属 性 
邮箱 : 


<input name="txtEamil" type="Email" 


E placeholder</legend> 


class="inputtxt" 


HH 
EZ 


输入 正确 的 邮件 地 址 ! " > 
«input name-"frmSubmit" type="submit" 
class-"inputbtn" value-" T ^2" /> 


placeholder-" 


«/fieldset^ 
</form> 
</body> 
</html> 
通过 上 述 代码 ， 如 果 需 要 在 表单 中 设置 输入 框 元 素 的 默认 提示 信息 AAR), R 
加 该 元 素 的 “placeholder” 属 性 ,并 设置 属性 的 内 容 即 可 。 这 样 即使 输入 框 中 的 内 容 没 有 消失 ， 
单 击 “提交 ”按钮 后 也 不 会 将 占 位 文本 作为 输入 框 中 的 内 容 提 交 给 服务 器 。 执 行 后 的 初始 效 
果 如 图 4-16 所 示 。 
输入 非法 邮件 地 址 ， 单 击 “ 提 交 ” 按 钮 后 会 显示 对 应 的 提示 ， 如 图 4-17 所 示 。 
三 属性 placeholder 
邮箱 : | aaal d 
属性 placeholder EB 请 输入 电子 邮件 地 址 。 
邮箱 : 提交 


图 4-16 初始 效果 (一 ) 
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图 4-17 初始 效果 〈 二 ) 
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注意 : 虽然 利用 输入 框 中 的 “placeholder” 属 性 可 以 很 方便 地 实现 动态 显示 提示 信息 的 功 
能 ， 但 当 内 容 过 长 时 还 是 建议 使 用 元 素 的 “title” 属性 来 显示 。 并 且 ， 文 本 输入 框 中 的 
“placeholder” 属性 值 只 支持 纯 文 本 ， 目 前 还 不 支持 HTML 语法 ， 也 不 能 修改 输入 框 中 占 位 文 


本 的 样式 。 


4.2.4_ 验 证 文本 框 中 的 内 容 是 否 为 空 


在 HTML 5 页 面 中 ， 可 以 使 用 属性 “required” 验 证 文本 框 中 的 内 容 是 否 为 


“required” 适 用 于 以 下 类 型 的 <input> 标签 : 
口 text 

Search 

url 
telephone 
email 
password 
date pickers 
number 
checkbox 
radio 

file 


DOOOODOODOODODODOCDD 


f HTML 中 ， 当 “email” 或 “url” 类 型 的 <input> 元 素 在 提交 表单 时 ， 都 要 进行 内 容 验 


证 。 这 种 验证 仅 针对 输入 框 中 的 内 容 是 否 符合 各 自 所 属 的 类 型 


A 


对 输入 框 中 的 文本 内 容 是 否 为 


空 ， 并 不 验证 ， 即 只 验证 非 空 内 容 。 由 此 可 见 ， 只 要 在 验证 元 素 中 添加 一 个 “required” 属 性 ， 
就 可 以 对 其 内 容 是 否 为 空 进行 自动 验证 ， 如 果 为 空 ， 在 表单 提交 数据 时 会 显示 错误 提示 信息 。 
下 面 通过 一 个 实例 讲解 验证 文本 框 中 的 内 容 是 否 为 空 的 方法 。 


实例 4-10 说 og 
源码 路 径 daima\4\10.html 
功能 验证 文本 框 中 的 内 容 是 否 为 空 


在 本 实例 的 表单 中 ， 创 建 了 一 个 用 于 输入 “姓名 ”的 “te 
素 中 添加 了 一 个 “required” 属 性 
将 自动 验证 输入 文本 框 中 的 内 容 是 否 为 空 ， 如 果 为 空 则 会 显 
的 具体 代码 如 下 所 示 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title> 使 用 input 元 素 </title> 

<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 


` 


xt” 类 型 <input> 元 素 ， 并 在 该 元 


" 


示 错 误 信息 。 


将 属性 值 设置 为 “true”。 当 用 户 单 击 表单 
n 


实例 文人 


“提交 ”按钮 时 ， 


F 10.html 
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<body> 
«form id="frmTmp"> 
<fieldset> 
<legend> 属 性 required</legend> 
姓名 : 
<input name="txtUserName" type="text" 
class="inputtxt" required /> 
<input name="frmSubmit" type="submit" 
class="inputbtn" value=" 提 交 " /> 
</fieldset> 
</form> 
</body> 
</html> 


在 上 述 页 面 的 表单 中 ， 如 果 需 要 验 说 


二 | 


“required” 属 性 ， 并 将 该 属性 的 值 设置 为 “true” 或 只是 增加 属性 名 称 “required”。 设 置 完成 
后 , 在 表单 提交 时 , 将 自动 检测 该 输入 框 中 的 内 容 是 否 为 空 。 在 笔者 写作 本 书 时 , 只 有 Chrome 
与 Opera 浏览 器 支持 输入 框 中 的 “required” 属 性 。 在 Opera 浏览 器 中 的 执行 效果 如 


E 茶 个 输入 框 的 内 容 (必须 不 为 空 值 )， 只 要 添加 一 个 


ANA 


I 图 4-18 
所 示 。 
= Im xd 
LETTURE [M SRL... > | M Sins... + 
= > Ə er |E 本 地 | localhost/E:, CEL 
属性 required 
= | Ey 
必须 填写 


a e) 


图 4-18 执行 效果 


4.2.5 ”开启 表单 的 自动 完成 功能 


fr HTML 5 中 ， 使 用 属性 “autocomplete” 可 以 设置 <form> 或 <input> 域 ， 使 其 拥有 自动 完 


成 功能 。 属性 “autocomplete” 适 用 于 <form> 标 签 , 以 及 <input> 标签 中 的 “text” 


“telephone” “emai AA. 
域 中 输入 时 ， 浏 览 器 应 该 在 该 域 中 显示 填写 的 选项 。 在 某 些 浏览 器 中 ， 可 能 还 需要 启用 自动 
完成 功能 ， 以 使 该 属性 生效 。 


下 面 通过 一 个 实例 讲解 开启 表 单 的 自动 完成 功能 的 方法 。 


H 


^ éé search » “url ”> 
password”“datepickers”“Trange” 和 “color” 类 型 。 当 用 户 在 自动 完成 


1” “ 


实例 4-11 说 明 
源码 路 径 daimaMM 1.html 
功能 开启 表单 的 自动 完成 功能 
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实例 文件 11.html 的 代码 如 下 。 


<!DOCTYPE html> 


<html> 
<head> 


«meta charset-"utf-8" /> 


«title» H] placeholder 属性 
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</title> 


<link href-"css.css" rel="stylesheet" type="text/css"> 


</head> 
<body> 


<form action="123.asp" method="get" autocomplete="on"> 


姓 :<input type="text" name="fname" /><br /> 
p 


名 : <input type="text" name-"Iname" /><br /> 
E-mail: <input type="email" name-"email" autocomplete="off" /><br /> 
<input type="submit" /> 


</form> 


<P>A 5 ETERA E 
<p> 请 注意 ， 表 单 的 自动 完成 功能 是 打开 的 ， 而 e-mail 域 是 关闭 的 。</p> 


</body> 
</html> 


执行 后 的 效果 如 图 4-19 所 示 。 


A, AK) d 


载 页 面 ， 来 查看 自动 完成 功能 是 如 何 工作 的 。</p> 


— UT - Opera = [D| x| 
UP oes | bè 使 用 placeholder... x | 觅 使 用 placeholder... 十 Im 
2 - [ 8 本 地 | localhost/E:, Xx | [F]; 85881 
W: faa 
名 : jaa 
E-mail: 
旦 
LR Fé — 4828698 aH | 
VE m e SES 自动 完成 功能 是 如 何 工 作 的 。 
请 注意 ， 表 单 的 自动 完成 功能 是 打开 的 ， 而 e-mail 域 是 关闭 的 。 
Deo 45 AO a m 


AR] 


4-190 执行 效果 


4.2.6” 重 写 表 单 中 的 某 些 属性 


属 


H 


— 


Æ HTML 5 中 ,通过 表单 重 


生 设 定 。HTML 中 


ETE “form override attributes” 可 以 重 写 <form> 元 素 的 某 些 


WE 


P 


O formaction: 重 写 表单 的 action 属性 。 
O formenctype: 重 写 表单 的 enctype 属性 。 


口 formmethod: H 
L] formnovalidate: 


limi 


的 method 
EE 写 表单 的 novalidate 属性 。 


RHE. 


"uni 
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口 formtarget: 重 写 表单 的 target 属性 。 

表单 重 写 属性 适用 于 以 下 类 型 的 <input> 标签 : 
口 submit 

L] image 

下 面 通过 一 个 实例 讲解 重 写 表 单 中 的 某 些 属 性 的 方法 。 


uum 


i 


实例 4-12 说 HJ 
源码 路 径 daima\4\12.html 
功能 重 写 表单 中 的 某 些 属性 


实例 文件 12.html 的 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title></title> 

<link href="css.css" rel="stylesheet" type="text/css"> 

</head> 

<body> 

<form action-"demo form.asp" method="get" id="user_form"> 

E-mail: <input type="email" name="userid" /><br /> 

<input type="submit" value="Submit" /><br /> 

<input type="submit" formaction-"/example/html5/demo admin.asp" value="Submit as admin" /><br /> 
<input type="submit" formnovalidate="true" value="Submit without validation" /><br /> 
</form> 


</body> 
</html> 


执行 后 的 效果 如 图 4-20 所 示 。 


file://localhost/E: /XEGXB8X85 XESXGDXGE/HTBLS/ HIN, = [Bl >x] 
U Üpera [T file://localhost/E:... X |25 Tu] 


= > D - © 本 地 | localhost/E:, - 使 用 日 | 


Em: ——— 


ad 


请 输入 一 个 有 效 的 电子 邮件 地 址 | 


Submit without validation 


Deo “S € a < y 


图 4-20 ”执行 效果 
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4.2.7 ”自动 设置 表单 中 传递 数字 


类 型 


fr HTML 5 网 页 中 ,使 用 属性 “min”“max” 和 “step” 可 以 为 包含 数字 或 日 期 的 <input> 

规定 限定 值 ( 约 束 )。 这 三 个 属性 的 说 明 如 下 。 

口 max 属性 : 规定 输入 域 所 允许 的 最 大 值 。 

口 min 属性 : 规定 输入 域 所 允许 的 最 小 值 。 

Q step 属性 : 为 输入 域 规定 合法 的 数 子 间隔 (如 果 step="3"， 则 合法 的 数 是 -3，0，3， 
6 等) 。 

属性 “min”“max” 和 “step” 适 用 于 以 下 类 型 的 <input> 标签 : 

L] date pickers 


L] number 
L] range 


下 面 通过 一 个 实例 讲解 自动 设置 表单 中 传递 数字 的 方法 。 


12 3d 


所 示 。 


实例 4-13 说 HJ 
源码 路 径 daima\4\13.html 
功能 动 设置 表单 中 传递 数字 


在 本 实例 中 显示 了 一 个 数字 域 ， 该 域 接受 介 于 0 到 10 之 间 的 值 ， 且 “step” 
是 说 ， 合 法 的 值 为 0、3、6 和 9。 实 例文 件 13.html 的 实现 代码 如 下 。 


性 值 为 3。 


= 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title></title> 

<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 


<body> 


<form action-"/example/html5/demo form.asp" method=" get"> 


Points: <input type="number" name="points" min="0" max="10" step="3"/> 


<input type="submit" /> 


</form> 


</body> 
</html> 


执行 上 述 代码 后 ， 可 以 用 小 箭头 目 动 输入 从 0 开始 的 逐步 递增 3 的 数学 ， 如 图 4-21 
如 果 输 入 的 数字 不 符合 规则 ， 单 击 “ 提 交 ” 按 钮 后 则 输出 对 应 的 提示 ， 如 图 4-22 


所 示 。 
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pe I e xd 
M opera || Kb cine: //localhost/E:.., |a» i Í Deere [| anam = 四 
|€ > 2 o [W Xà [1x lk s. 2 Q e9- F We WETU 
Points: | 3 BEA] Jl Points. | Li EE 
此 表单 不 允 诗 数字 4。 此 输入 框 只 允 诗 特定 
的 数字 。 
De e " ODs < e ~ 一 0 一 一 一 
图 4-21 执行 效果 图 4-22 ”非法 提示 
4.2.8 ”在 表单 中 选择 多 个 上 传 文件 
Æ HTML 5 中， 使 用 属性 “mnultiple” 可 以 在 输入 域 中 选择 多 个 值 。 属 性 “multiple” 适 用 
于 如 下 两 种 类 型 的 <input> 标 签 。 
口 email 
ü file 


下 面 通过 一 个 实例 


解 在 表单 中 选择 多 个 上 传 文件 的 方法 。 


实例 4-14 说 — HJ 
源码 路 径 daimaMM 4.html 
功能 在 表单 中 选择 多 个 上 传 文件 
在 本 实例 中 设置 了 一 个 查询 表单 ， 单 击 “ 添 加 文件 ”按钮 后 弹出 “打开 ”对 话 框 ， 在 此 


可 以 选择 多 个 上 传 文件 。 实 例文 件 14.html 


<!DOCTYPE html> 
<html> 

<head> 

«meta charset-"utf-8" /> 


<title></title> 


的 代码 如 下 。 


<link href-"css.css" rel="stylesheet" type="text/css"> 


</head> 


<body> 


<form action-"demo form.asp" method=" 


get"> 


Select images: <input type="file" name="img" multiple="multiple" /> 


<input type="submit" /> 


</form> 


<p> 当 您 浏览 文件 时 ， 请 试 着 选择 多 个 文件 。</p> 
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</body> 
</html> 
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执行 后 的 效果 如 图 4-23 所 示 。 


file: //localhost/E:/XF6%58X85%ESYWBDXOEVIYWIS = D| xi 
W Opera J| LA file://localhost/E:... x | SF 
€ > 9 9- | 4h | localhos #|[@]- EAE A] 


Select images: “C:\Documents and Set 【添加 文件 | “提交 E 
当 您 浏览 文件 时 ， 请 试 着 选择 多 个 文件 。 


打开 21 xl 


查找 范围 @j: [omm —— gv O £ ° m; 


0b3a69aan4Tlea072cf99c052bde8f62912c82531b9606a91b64b4b86559468a0[1] 
团 4f3eb0ele5565bfa33bdgdT7249f043dfT1423df46526df2122e30Tba435d6d30[1] 
5a44260ca0068e2bf602fbfdgd2ed19148b4ll4bd7fTe6cT65f39a0a314691340[1] 
T0a5f2634c5ad7f032b807007113faeaf932b3e76d38c0fe228e77379c509d670[1] 
1944562[1] 


| 
Oe 5 E) 1944562[1]. txt 
TREE — 
圆 ssl71609[1]. jpg 
"n" ad68583f62eclle45Te271a3ea545554fd0eap1256bhc5750131f9dcbd26619920[1] 


Firefox HTML Doc: 
修改 日 期 : 201226: 
9:42 


= bac5152b123c90f0b9d3ab48588109cd93135cfaBb869d94cf5be017a2657beb0[1] 
end[1] 
collect[1] 
加 423501bfcSbc8b32e3517bbba3145a73b553b4905a7227247f82c3222a120ceb0[1] 

$ desktop. ini 
index[1].php option-com content&tesk-viewbi d-1098Iteni d-3581 ini t-18lini- 
index[2]. php, option-con content&taskcvi ew&i d- 1098I teni d-35&lini t-l&limi: 


大 小 : 386 FP 


文件 名 四 T EET 
sma [全 部 文件 eo zi xm | 


图 4-23 ”执行 效果 


4.9. 新 的 表单 元 素 


f HTML 5 页 面 中 ， 可 以 支持 很 多 新 的 表单 元 素 。 本 节 将 详细 介绍 这 些 新 元 素 的 基本 用 法 。 
431 在 表单 中 自动 提示 输入 文本 


在 表单 中 自动 提示 输入 文本 ， 这 一 功能 在 搜索 引擎 中 比较 常见 。 例 如 使 用 百度 引擎 在 检 
索 信息 时 ， 会 在 下 拉 框 中 自动 提示 一 些 热点 信息 ， 如 图 4-24 所 示 。 


00 
Bai Bl 


新 闻 网 页 贴吧 知道 MP3 EIE 视频 地 图 
HTML5 百度 一 下 
html 5 与 css 3 权威 指南 
html 500 
html5 是 什么 
hm ARE 
html5 教程 
html5 开发 工具 
html5 video 
html5test 
htmi5 flash 
html5 测 试 


图 4-24 百度 的 自动 提示 
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O HTML 5 开发 从 入 门 到 精通 


在 HTML 5 中 ， 使 用 <datalist> 元 素 可 以 设置 输入 域 的 选项 列表 。 列 表 是 通过 <datalis 亿 内 


的 <option> 元 素 创建 的 , 如 需 把 <datalist> 绑 定 到 输入 域 , 请 


用 输入 域 的 “list” 属 性 引用 <datalist> 


的 ID。<datalist> 是 HTML 5 中 新 增 的 元 素 ， 该 元 素 的 功能 是 辅助 表单 中 文本 框 的 数据 输入 。 


<datalis 人 > 元 素 本 身 是 隐藏 的 ， 但 是 与 表单 文本 框 的 “list” 属 性 绑 定 ， 即 将 “list” 属 性 值 


设置 为 <datalis 人 元 素 的 “ID” 号 。 绑 定 成 功 后 ， 用 户 单 击 文本 框 准备 输入 内 容 时 ，<datalist> 


列表 ， 


的 某 个 


元 素 会 以 列表 的 形式 显示 在 文本 框 的 底部 ， 提 示 输 入 字符 的 内 容 。 当 用 户 选 ， 


属性 等 进行 绑 定 。 
下 面 通过 一 个 实例 


解 在 表单 中 自动 提示 输入 文本 的 方法 。 


实例 4-15 yi Hj 


选项 后 ，<datalist> 元 素 将 自动 隐藏 ， 同 时 在 文本 框 中 显示 所 选择 的 内 容 。<datalis 人 > 元 素 中 的 
列表 内 容 可 以 动态 进行 修改 , 支持 表单 中 各 种 类 型 的 输入 框 , 例如 可 与 “email”、“url”、“text” 


源码 路 径 daimaMM 5.html 


在 表单 中 自动 提示 输入 文本 


功能 


在 本 实例 页 面 的 表单 中 ,新 增 ] 
个 文本 输入 框 ， 并 将 文本 框 的 “list” 
行 绑 定 。 当 单 击 输入 框 时 ， 将 显示 <datalist> 元 素 ' 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title> 使 用 datalist«/title 

<link href-"css.css" rel="stylesheet" type="text/css"> 

</head> 

<form id="frmTmp"> 

<fieldset> 
<legend> 请 输入 职业 : </legend> 
«input type="text" id="txtWork" 
list-"IstWork" class="inputtxt" /> 
<datalist 1d="lstWork"> 
<option value=" 设 计 师 "></option> 
«option value=" 软 件 工 程 师 "></option> 
«option value=" 厨 师 '></option> 
</datalist> 
</fieldset> 

</form> 

<body> 

</body> 

</html> 


在 上 述 代码 


将 输入 框 的 “list” 属 性 设置 为 <datalist> 元 素 的 ID 号 即 可 。 在 Opera 浏览 器 ， 
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个 ID 号 为 “lstWork” 的 <datalis 从 元 素 。 然 后 创建 了 一 
属性 设置 为 “lstWork”， 即 将 文本 框 与 <datalist> 元 素 进 
的 列表 项 。 实 例文 件 15.html 的 代码 如 下 。 


， 如 果 将 <datalist> 元 素 与 文本 输入 框 相 互 绑 定 ， 在 实现 具体 绑 定 时 ， 只 需 


的 执行 效果 


如 图 4-25 所 示 。 
由 图 4-25 的 执行 效果 可 知 ， 虽 然 <datalist> 与 


<inpu 人 > 元 素 的 关系 十 分 密切 ， 但 


实体 的 两 


是 两 者 还 是 属于 不 同 
个 元 素 ， 无 法 融合 成 一 个 独立 的 新 元 素 。 这 


是 出 于 


对 浏览 旨 兼 容 性 的 考虑 ， 因 为 如 果 合 成 为 一 


MET 


那么 不 兼容 <datalist> 元 素 的 浏览 器 也 无 法 使 


Kim 使 用 表单 元 素 /| 


请 输入 职业 : 


图 4-25 执行 效果 


用 与 其 绑 定 的 文本 输入 框 ， 这 会 约束 了 <input> 元 素 中 文本 框 的 使 用 范围 。 
4.3.2 一 个 简单 的 乘法 计算 器 
ft HTML 5 中， 使 用 <output> 元 素 可 以 实现 不 同类 型 信息 的 输出 ， 例 如 计算 或 脚本 输出 。 
该 元 素 必 须 从 属于 某 个 表单 ， 或 通过 属性 指定 某 个 表单 。 该 元 素 的 功能 是 在 页 面 中 显示 各 种 
不 同类 型 表单 元 素 的 内 容 ， 如 输入 框 的 值 、JavaScript 代码 执行 后 的 结果 值 等 。 为 了 获取 这 些 
值 ， 需 要 设置 <output> 元 素 的 “onFormlnput” 事 件 。 在 表单 输入 框 中 录入 内 容 时 ， 和 触发 该 事 
件 ， 从 而 十 分 方便 地 实时 侦察 到 表单 中 各 元 素 的 输入 内 容 。 
下 面 通过 一 个 实例 讲解 实现 一 个 简单 的 乘法 计算 器 的 方法 。 
实例 4-16 说 ” HJ 
源码 路 径 daimaMM 6.html 
功能 一 个 简单 的 乘法 计算 器 
本 实例 的 功能 是 ， 在 新 建 的 表单 中 创建 两 个 输入 文本 框 ， 分 别 用 于 输入 两 个 数字 。 然 后 
新 建 一 个 <output> 元 素 , 用 于 显示 两 个 输入 文本 框 中 数字 相 乘 后 的 结果 。 当 改变 两 个 输入 框 ， 


个 


任意 


TUER 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 使 用 output 元 素 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<form id="frmTmp"> 
<fieldset> 
<legend> 输 入 两 个 数字 </legend> 
«input id="txtNum_1" type="text" 
class="inputtxt" /> * 
<input id="txtNum_ 2" type="text" 
class="inputtxt" /> = 
«output onFormInput= 


"value=txtNum 1.value*txtNum 2.value"> 
</output> 
</fieldset> 
</form> 


时 ，<output> 元 素 显 示 的 计算 结果 也 将 自动 变化 。 实例 文件 16.html 的 代码 如 下 。 
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— HTML 5 开发 从 入 门 到 精通 


</body> 
</html> 


在 上 述 代 码 中 ， 因 为 将 <output> 元 素 的 内 容 通 过 “onFormlnput” 事 件 绑 定 了 两 个 输入 文 
本 框 ， 因 此 ， 当 输入 框 中 的 值 发 生变 化 时 ，<output> 元 素 的 内 容 根据 绑 定 的 规则 迅速 响应 ， 这 
样 便 实现 了 一 种 联动 的 效果 。 另 外 ，<output> 元 素 的 “value” 值 为 “txtNum lvalue* 
txtNum 2.value", 这 表示 将 显示 的 内 容 绑 定 为 两 个 输入 文本 框 值 的 相 乘 ， 这 一 点 和 “this.inner 
HTIML” 的 表示 方法 类 似 。 另 外 ， 也 可 以 通过 编写 JavaScript 自 定 义 函 数 ， 与 “onFormInput” 
事件 绑 定 来 实现 。 执 行 效 果 如 图 4-26 所 示 。 

输入 两 个 数字 
12 * 
13 - 156 


TN 


图 4-26 执行 效果 


4.3.3 ”在 网 页 中 生成 一 个 密 钥 

在 HTML 5 中 ，<keygen> 元 素 是 一 种 密 钥 对 生成 器 (key-pair generator) 技术 。 当 提交 表 
单 时 会 生成 两 个 密 钥 ,一 个 是 私 钥 ， 一 个 公 钥 。 其 中 私 钥 (Private Key) 存储 于 客户 端 ， 公 铀 
(PublicKey) 则 被 发 送 到 服务 器 。 公 钥 可 用 于 之 后 验证 用 户 的 客户 端 证 书 〈Client Certificate)» 
日 是 截止 本 书 出 版 之 时 ， 浏 览 器 对 此 元 素 的 糟糕 的 文 持 度 不 足以 使 其 成 为 一 种 有 用 的 安全 
标准 


= 


下 面 通过 一 个 实例 讲解 在 网 页 中 生成 一 个 密 钥 的 方法 。 


实例 4-17 说 — HJ 
源码 路 径 daima\4\17.html 
功能 在 网 页 中 生成 一 个 密 钥 


在 本 实例 的 表单 中 ， 新 建 了 一 个 “name” 值 为 “keyUserInfo ”的 <keygen> 元 素 ， 通 过 此 
元 素 可 以 在 页 面 中 创建 一 个 选择 密 钥 位 数 的 下 拉 列 表 框 。 当 选择 列表 框 中 的 某 选 项 值 ， 单 击 
表单 的 “提交 ”按钮 时 ， 可 以 根据 所 选 密 钥 的 位 数 生成 对 应 位 数 的 密 钥 提 交 给 服务 器 。 实 例 
文件 17.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 使 用 keygen 元 素 </title> 
<link href-"css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<form id="frmTmp"> 
<fieldset> 
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<legend> 选 择 密 钥 位 数 </legend> 
«keygen name-"keyUserInfo" class="inputtxt" /> 
<input name="frmSubmit" type="submit" 
class="inputbtn" value=" 提 交 " /> 
</fieldset> 

</form> 

</body> 

</html> 


在 上 述 代 码 中 ，<keygen> 元 素 在 表单 中 以 下 拉 列 表 的 形式 展示 提供 密 钥 位 数 的 选择 。 当 
提交 表单 时 ， 可 以 通过 <keygen> 元 素 ， 在 表单 的 “name” 值 中 获取 该 元 素 生 成 的 对 应 位 数 密 
钥 。 另 外 ，<keygen> 元 素 中 “keyType” 属 性 表明 生成 密 钥 的 类 型 ， 如 设置 为 “rsa” W “rsa” 
加 密 类 型 生成 相应 位 数 的 密 钥 。 到 笔者 写作 本 书 时 , 只 有 Chrome 与 Opera 浏览 器 支持 该 元 素 。 
执行 效果 如 图 4-27 所 示 。 


选择 密 钥 位 数 
| 1024〔 中 等 强度 】 y deu 


图 4-27 执行 效果 
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音频 和 视频 应 用 详解 


HTML 5 标记 语言 
页 的 美观 性 。 本 章 将 详细 
体 实例 来 演示 有 具体 流程 。 


5.1 处 理 视频 


通过 使 用 HTML 5 技术 ， 可 以 在 网 页 中 实现 视频 处 理 功 能 ， 并 |] 
就 可 以 实现 。 本 节 将 详细 讲解 HTML 5 处 理 视频 的 基本 知识 。 


S.1.1 使 用 <video> 标 记 


到 现在 为 止 ， 仍 然 没 有 一 个 如 


具有 可 以 在 页 面 : 


E 网 页 


当前 ，<video> 标 记 文 持 如 下 三 种 视频 格式 。 


O Ogg: 带 有 Theora 视频 编码 和 
O MPEG4: wA H.264 视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 


播放 视频 ， 并 探 


Vorbis 音频 编码 的 Ogg 文件 。 


判 这 个 视频 。 


介绍 在 HTML 5 页 面 中 实现 播放 和 视频 文件 的 方法 ， 


并 通过 几 个 


上 显示 视频 的 标准 。 在 这 之 前 是 通过 捐 
上 显示 视频 ， 例 如 Flash。HTML 5 的 出 现 为 我 们 解决 了 这 个 问题 ， 在 HTML 5 中 新 增 了 标记 
<video>， 通 过 这 个 标记 可 以 在 网 页 ! 


T 


° 


O WebM: 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 。 


上 述 三 种 格式 在 主流 浏览 器 版 本 的 支持 信息 刀 


表 5-1 主流 浏览 器 版 本 支持 video 标记 的 情况 


IK 5-1 所 示 


直接 播放 音频 和 视频 文件 的 功能 ， 这 大 大 增强 了 网 


` 


晶 仅 需要 短 短 的 几 行 代码 


EFIE Web 页 面 


格 式 IE Firefox Opera Chrome Safari 
Ogg No 3.5+ 10.5+ 5.0+ No 
MPEG4 9.0+ No No 5.0 3.0 
WebM No 4.0 10.6 6.07 No 
video 标记 的 使 用 格式 如 下 。 
«video src="movie.ogg" controls="controls"> 
</video> 
O control: 供 添加 播放 、 和 暂停 和 音量 控件 。 
口 <video> 与 </video> 之 间 插 入 的 内 容 : 是 供 不 文 持 <video> 元 素 的 浏览 器 显示 的 。 


例如 下 面 的 代码 。 
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«video src-"movie.ogg" width="320" height="240" controls="controls"> 
你 的 浏览 器 不 支持 这 种 格式 


</video> 


在 上 述 代码 中 使 用 了 Ogg 格式 的 视频 文件 ,此 格式 视频 适用 于 Firefox、Opera 以 及 Chrome 
浏览 器 。 如 果 要 确保 在 Safari 浏览 器 也 能 使 用 ， 则 视频 文件 必须 是 MPEG4 类 型 。 


另外 ，<video> 标 记 人 允许 多 个 “source” 元 素 。“source” 元 素 可 以 链接 不 同 的 视频 文件 。 
浏览 器 将 使 用 第 一 个 可 识别 的 格式 。 例 如 下 面 的 代码 。 


«video width="320" height="240" controls="controls"> 
«source src="movie.ogg" type="video/ogg"> 
<source src="movie.mp4" type="video/mp4"> 

你 的 浏览 器 不 支持 这 种 格式 


</video> 


注意 : Internet Explorer 8 不 支持 <video> 标 记 。 在 IE 9 中, 将 支持 使 用 MPEG4 的 <video> 


5.1.2 ”<video> 标 记 的 属性 
<video> 标 记 中 各 个 属性 的 具体 说 明 如 表 5-2 所 示 。 


表 5-2 <video> 的 属性 信息 


属 性 值 fe X 
autoplay autoplay 如 果 出 现 该 属性 ， 则 视频 在 就 绪 后 马上 播放 

controls controls 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 比 如 “播放 ”按钮 

height pixels 设置 视频 播放 器 的 高 度 

loop loop 如 果 出 现 该 属性 ， 则 当 媒 介 文 件 完成 播放 后 再 次 开始 播放 

如 果 出 现 该 属性 ， 则 视频 在 页 面 加载 时 进行 加 载 ， 并 预备 播放 。 如 果 使 用 

preload preload "autoplay"， 则 忽略 该 属性 

src url 要 播放 的 视频 的 URL 地 址 

width pixels 设置 视频 播放 器 的 宽度 


1. autoplay 属性 
通过 此 属性 自动 播放 <video> 中 设置 的 视频 ， 例 如 下 面 的 代码 。 


«video controls="controls" autoplay="autoplay"> 
«source src="movie.ogg" type="video/ogg" /> 
«source src="movie.mp4" type-"video/mp4" /> 

你 的 浏览 器 不 支持 ! 


</video> 


下 面 通过 一 个 实例 讲解 在 网 页 中 自动 播放 视频 的 方法 。 
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实例 5-1 W 
源码 路 径 daima\5\1.html 
功能 在 网 页 中 自动 播放 一 个 视频 


实例 文件 1.html 的 主要 代码 如 下 。 


<!DOCTYPE HTML> 
<html> 
<body> 


«video controls="controls" autoplay="autoplay"> 
«source src="movie.ogg" type="video/ogg" /> 
<source src="movie.mp4" type="video/mp4" /> 

Your browser does not support the video tag. 

</video> 


</body> 
</html> 


上 述 代 人 码 的 功能 是 在 网 页 中 自动 播放 名 为 
“movie.ogg” 视 频 文件 ， 在 代码 中 设置 的 此 视频 文件 
和 实例 文件 autoplay.html 同属 于 一 个 目录 下 。 执 行 后 
的 效果 如 图 5-1 Pra. 
2. controls 属性 
属性 “controls” 的 功能 是 在 浏览 器 中 设置 显示 播 
放 器 的 控制 按钮 ， 设 置 浏览 器 控件 应 该 包括 下 面 的 控 
制 功能 。 

口 播放 

口 暂停 图 5-1 执行 效果 
定位 ( 拖 动 进度 条 ) 

口 音量 

口 全 屏 切 换 

口 字幕 

口 音 轨 

例如 下 面 的 代码 ; 


«video controls-"controls" controls="controls"> 
«source src-"movie.ogg" type-"video/ogg" /> 
«source src-"movie.mp4" type-"video/mp4" /> 

你 的 浏览 器 不 支持 ! 


</video> 


i: 


下 面 通过 一 个 实例 讲解 在 网 页 中 控制 播放 视频 的 方法 。 
90 mm 
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实例 5-2 说 HJ 
源码 路 径 daima 5V2.html 
功能 在 网 页 中 控制 播放 的 视频 


实现 文件 2.html 的 实现 代码 如 下 所 示 。 


<!DOCTYPE HTML> 
<html> 
<body> 


«video controls-"controls" controls="controls"> 
«source src-"movie.ogg" type-"video/ogg" /> 
«source src-"movie.mp4" type-"video/mp4" /> 

你 的 浏览 器 不 支持 ! 


</video> 


</body> 
</html> 


通过 上 述 代 码 , 在 网 页 中 播放 名 为 “movie.ogg” 
视频 文件 ， 并 且 在 播放 时 可 以 控制 这 个 视频 ， 例 如 
播放 进度 。 执 行 后 的 效果 如 图 5-2 Pra. 

height 属性 
过 使 用 属性 “height”* 可 以 设置 视频 播放 器 的 
高 度 ， 使 用 格式 如 下 所 示 。 


«video height="value" /> 
“value ”表示 属性 值 ， 单 位 是 “pixels”， 以 像素 


为 单位 计算 高 度 值 ， 比 如 "100px" 或 “100”。 
例如 下 面 的 代码 : 


[E> 


<video controls="controls" controls="controls"> 
video/ogg" /> 

«source src-"movie.mp4" type-"video/mp4" /> 
</video> 


«source src-"movie.ogg" type= 


00:01 í) 


图 5-2 执行 效果 


下 面 通过 一 个 实例 讲解 在 网 页 中 设置 播放 视频 高 度 的 方法 。 


实例 5-3 说 明 
源码 路 径 daima\5\3.html 
功能 在 网 页 中 设置 播放 视频 的 高 度 


实例 文件 3.html 的 实现 代码 如 下 。 
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<IDOCTYPE HTML> 
<html> 
<body> 


<video width-"500" height="600" controls="controls"> 
«source src-"movie.ogg" type-"video/ogg" /> 
«source src-"movie.mp4" type-"video/mp4" /> 

你 的 浏览 器 不 支持 ! 

</video> 

</body> 

</html> 


通过 上 述 代码 , 在 网 页 中 播放 名 为 “movie.ogg” 
的 视频 文件 ， 并 且 设 置 视频 播放 器 的 高 度 是 “600”。 
执行 后 的 效果 如 图 5-3 Bros. 


注意 : 尽量 不 要 通过 “height” 和 “width” Æ 
性 来 缩放 视频 . 通过 “height” 和 “width” 属 性 来 
缩小 视频 ， 只 会 迫使 用 户 加 载 原始 的 视频 ( 即使 在 
页 面 上 它 看 起 来 较 小 ) 正确 的 方法 是 在 网 页 上 使 用 
该 视频 前 ， 使 用 软件 对 视频 进行 压缩 。 

另外 , “width” 属性 和 "height" 属性 的 用 法 完 
全 一 样 ， 其 功能 是 设置 播放 视频 的 宽度 。 


4. loop 属性 DET 
属性 “loop” 的 功能 是 设置 当 视频 播放 结束 后 u 
将 重新 开始 播放 , 设置 此 属性 后 该 视频 将 循环 播放 。 LS 
例如 下 面 的 代码 。 


«video controls-"controls" loop="loop"> 
«source src-"movie.ogg" type-"video/ogg" /> 
«source src-"movie.mp4" type-"video/mp4" /> 
你 的 浏览 器 不 支持 ! 


</video> 


5. preload 属性 


这 个 属性 。 例 如 下 面 的 代码 。 


«video controls="controls" preload="auto"> 
«source src="movie.ogg" type="video/ogg" /> 
«source src-"movie.mp4" type="video/mp4" /> 

你 的 浏览 嚣 不 支持 ! 


</video> 
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属性 “preload” 的 功能 是 设置 是 否 在 页 面 加 载 后 载 入 视频 。 设 置 “autoplay” 属 性 会 忽略 


6. src 属性 


属性 “ 


第 5 章 音频 和 视频 应 用 详解 “ 


播放 的 视频 。 在 HTML 5 中 有 如 下 两 种 视频 文件 的 URL. 


O 绝对 URL H 
O 相对 URL H 


5.2 处理 音 频 


既然 HTML 5 fi 
户 可 以 在 网 页 中 处 理 


hg 


[lh 


UP. 


IU, APTIUS, BrEUPCBVRETE 


KTE 


5.2.1 ”<audio> 标 记 


EL 1 AA 


和 视频 功能 一 样 ， 到 
三 方 插件 来 实现 的 ， 例 如 Flash. 


EWE 
新 增 的 标记 <audio> 可 以 在 网 


yi 


三 种 音频 格式 ， 这 三 种 格式 在 主 


通过 <audio> 标 记 元 素 可 


目前 为 止 ， 在 网 页 ! 
HTML 5 的 


页 中 播放 音频 。 
以 非常 轻松 地 播放 声音 文件 或 者 音频 流 。 现 在 的 <audio> 标 记 文 持 


浏览 器 版 本 的 支持 信息 如 表 5-3 所 示 


使 用 HTML 5 处 理 音频 的 基本 方法 。 


src” 的 功能 是 设置 要 播放 的 视频 的 URL， 男 外 也 可 以 使 用 标签 <source> 来 设置 


主流 浏览 器 版 本 支持 audio 标记 的 情况 


H HTML 5 技术 ， 用 


yE 


上 :指向 另 一 个 站 点 ， 例 如 : href=http://www.xxxxxx.com/123.ogg. 
E: 指向 网 站 内 的 文件 ， 例 如 href="123._ogg". 


播放 音频 的 标准 还 未 统一 。 当 前 大 多 数 音频 都 


出 非常 轻松 地 解决 了 这 个 问题 ， 使 用 


表 5-3 
说 明 IE9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 
Ogg Vorbis Y Y Y 
MP3 Y y V 
Wav Y y V 
在 HTML 5 中 播放 音频 ， 只 需 通过 如 下 代码 即 可 实现 。 


口 control 属性 : 供 
O <audio> 与 </audio> 之 间 插 入 的 
例如 在 下 面 的 演示 代码 ， 
Opera 以 及 Chrome 浏览 器 。 要 想 确 保 适 月 


类 型 。 


在 标记 <audio>! 
fr. DU V a ER 


«audio src-"song.ogg" controls-"controls" 


</audio> 


添加 播放 、 和 暂停 和 音量 控件 。 


， 使 用 一 个 


«audio src="song.ogg" controls="controls"> 


你 的 浏览 器 不 支持 ! 


</audio> 


内 容 : 供 不 支持 <audio> 元 素 的 浏览 器 显示 。 
名 为 “ogg” 格 式 的 音频 文件 ， 可 以 适用 于 Firefox、 
HF Safari 浏览 器 ， 则 音频 文件 必须 是 MP3 或 Wav 


允许 有 多 个 “source” 元 素 ， 通 过 “source” 元 素 可 以 链接 不 同 的 音频 文 
第 一 个 可 识别 的 格式 。 例 如 下 面 的 代码 。 
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<audio controls="controls"> 


<source src= 


<source src= 


你 的 浏览 器 不 支持 ! 


</audio> 


5.2.2 ”<audio> 标 记 的 属性 


song.ogg" type="audio/ogg"> 
song.mp3" type="audio/mpeg"> 


<audio> 标 记 中 各 个 属性 的 具体 说 明 如 表 5-4 所 示 。 
k 5-4 <audio> 的 属性 信息 
属 性 值 i 述 
autoplay autoplay 如 果 出 现 该 属性 ， 则 音频 在 就 绪 后 马上 播放 
controls controls 如 果 出 现 该 属性 ， 则 向 用 户 显 示 控 件 ， 比 如 播放 按钮 
loop loop 如 果 出 现 该 属性 ， 则 每 当 音 频 结 束 时 重新 开始 播放 
— reload 如 果 出 现 该 属性 , 则 音频 在 页 面 加载 时 进行 加 载 , 并 预备 播放 。 如 果 使 用 "autoplay"， 
P P 则 忽略 该 属性 
src url 要 播放 的 音频 的 URL 


1. autoplay 属性 


"uni 


属性 “autoplay ”的 功能 是 在 网 页 中 自动 播放 指定 音频 ， 例 如 下 面 的 代码 。 


«audio controls-"controls" autoplay="autoplay"> 


«source src 


«source sri 


你 的 浏览 器 不 支持 ! 


</audio> 


- um 


一 个 实例 讲解 在 网 页 中 


BPE “autoplay” KA 


song.ogg" type="audio/ogg" /> 
song.mp3" type="audio/mpeg" /> 


的 规定 : 一旦 音频 就 绪 马 上 开始 播放 ， 并 且 是 自动 播放 。 


动 播放 一 个 音频 的 方法 。 


下 面 通 过 


实例 5-4 说 — UJ 
源码 路 径 daima\5\4.html 
功能 在 网 页 中 自动 播放 一 个 音频 


实例 文件 4html 的 实现 代码 如 下 。 


<!DOCTYPE HTML> 


<html> 
<body> 


<audio controls 


controls" autoplay="autoplay"> 


«source src="song.mp3" type="audio/mpeg" /> 


Your browser does not support the audio element. 
</audio> 
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上 述 代 码 的 功能 是 在 网 页 中 自动 播放 名 为 “song.mp3” 音 频 文件 ， 在 代码 中 设置 的 此 音 


第 5 章 音频 和 视频 应 用 详解 
</body> 
</html> 


=] 


频 文 件 和 实例 文件 yinautoplay.html 同属 于 一 个 目录 下 。 执 


行 后 的 效果 如 图 5-4 所 示 。 HH —] xm 
2. controls 属性 | 
属性 “controls” 的 功能 是 设置 在 网 页 中 显示 播放 器 的 四 
控制 控件 。 如 果 设置 了 该 属性 后 可 以 在 播放 器 中 显示 下 面 控制 功能 。 
口 播放 
a 暂停 
OQ 定位 
口 音量 
口 全 屏 切 换 
口 字幕 
a 音 轨 


下 面 将 通过 一 个 实例 讲解 在 网 页 中 控制 播放 的 音频 的 方法 。 


实例 5-5 说 明 
源码 路 径 daima\5\5.html 
功能 网 页 中 控制 播放 的 音频 


实例 文件 5.html 的 实现 代码 如 下 所 示 。 


<IDOCTYPE HTML> 
<html> 
<body> 


«audio controls="controls"> 


= 


<source src="song.ogg" type="audio/ogg" /> 


<source src="song.mp3" type="audio/mpeg" /> 


你 的 浏览 器 不 支持 ! 
</audio> 
</body> 
</html> 
在 上 述 代 码 中 ， 设 置 在 网 页 中 播放 指定 的 音频 文件 ， 并 且 在 播放 时 可 以 控制 这 个 音频 ， 
例如 播放 进度 和 和 暂停 等 。 执 行 后 的 效果 如 图 5-5 所 示 。 
3. loop 属性 d 1 00:06 4» 


ri 


E /| 
ES) 


放 ， 设 置 该 属性 后 将 循环 播放 这 个 音频 。 例 如 下 面 的 代码 。 


“loop ”的 功能 是 设置 当 音频 结束 后 将 重新 开始 播 


DS 


5-5 执行 效果 


«audio controls-"controls" loop="loop"> 


EN 95 


O HTML 5 开发 从 入 门 到 精通 


«source src-"song.mp3" type="audio/mpeg" /> 
你 的 浏览 器 不 支持 ! 


</audio> 


下 面 通过 一 个 实例 讲解 在 网 页 中 循环 播放 音频 的 方法 。 


实例 5-6 KM HH 
源码 路 径 daima\5\6.html 
功能 在 网 页 中 循环 播放 音频 


实例 文件 6.html 的 实现 代码 如 下 。 


<IDOCTYPE HTML> 
<html> 
<body> 


«audio controls="controls" loop="loop"> 
«source src="song.mp3" type="audio/mpeg" /> 
你 的 浏览 器 不 支持 ! 


</audio> 


</body> 


</html> > 


在 上 述 代 码 中 ,设置 在 网 页 中 循环 播放 指定 的 音频 文件 ,， 执 


行 后 的 效果 如 图 5-6 所 示 。 
4. preload 属性 


HHE B. Y “autoplay” J&TEWIZLNE “preload” Jš 


asi 


ES 


00:01 «4» 


图 5-6 执行 效果 


属性 “preload” 的 功能 是 设置 是 否 在 页 面 加 载 后 载 入 音频 ， 


<audio preload="load" /> 


FE 的 功能 。 使 用 “preload” 


“load” 用 于 规定 是 否 预 加 载 音 频 ， 可 能 有 如 下 三 个 取 值 。 


口 auto: 当 页 面 加 载 后 载 入 整个 音频 。 
O meta: 当 页 面 加 载 后 只 载 入 元 数据 。 
T none: 当 页 面 加 载 后 不 载 入 音频 。 
例如 下 面 的 代码 。 


«audio controls="controls" preload="auto"> 
«source src-"song.mp3" type="audio/mpeg" /> 
你 的 浏览 器 不 支持 ! 


</audio> 


5. src 属性 


属性 “sre” 的 功能 是 设置 要 播放 的 音频 的 URL， 另 外 用 户 也 可 以 月 


要 播放 的 音频 。 在 HTML 5 中 有 如 下 两 种 视频 文件 URL。 
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属性 的 格式 如 下 。 


日 标签 <source> 来 设置 


口 2 
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名 对 URL 地 址 :指向 男 一 个 站 点 ， 例 如 ; href-http://www.xxxxxx.com/song.ogg o 


口 f 


日 对 URL 地 址 : 指 癌 网 站 内 的 文件 ， 例 如 href="song.ogg". 


例如 下 面 的 代码 。 


«audio src-"song.ogg" controls="controls"> 
你 的 浏览 器 不 支持 ! 


</audio> 


53 ”高 级 应 用 


本 章 前 两 节 已 经 讲解 了 HTML 5 人 处理 音频 和 视频 的 基本 知识 。 本 节 将 进一步 讲解 HTML 5 
处 理 音频 和 视频 的 高 级 知识 。 


5.3.1 为 播放 的 视频 准备 一 幅 素材 图 片 


ft HTML 5 的 <video> 元 素 中 ， 属 性 “poster” 表 示 所 选 图 片 URL， 如 果 添 加 该 属性 ， 则 


在 视频 文件 播放 前 显示 该 图 片 ， 而 不 是 默认 显示 视频 文件 的 第 一 帧 。 另 外 添加 该 属性 ， 还 可 


以 避免 在 播放 的 视频 文件 不 可 用 时 ， 出 现 一 片 空白 区 域 ， 这 会 影响 用 户 体验 。 
下 面 通过 一 个 实例 讲解 为 播放 的 视频 准备 一 幅 素 材 图 片 的 方法 。 


在 本 实例 的 <video> 元 素 中 ， 新 增 了 一 个 “poster” 属 性 ， 并 选取 一 幅 图 片 作为 该 属性 的 
值 。 当 播放 视频 文件 时 ， 在 视频 播放 区 域 中 会 首先 显示 “poster” 属 性 指定 的 图 片 。 实 例文 伯 


7.html 的 


实例 5-7 说 HJ 
源码 路 径 daima\5\7.html 
功能 为 播放 的 视频 准备 一 幅 素 材 图 片 


T 


HAKILI F o 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title> 设 置 <video> 元 素 的 poster 属性 </title> 

<link href="css.css" rel="stylesheet" type="text/css"> 

</head> 

<body> 

«video id="vdoMain" src="123.ogg" 
width-"360px" height="220px" 
controls-"true" poster-"123.jpg" 
你 的 浏览 器 不 文 持 视 频 

</video> 

</body> 

</html> 


在 上 述 代码 中 ， 设 置 了 <video> 媒 体 元 素 的 “poster” 属 性 ， 该 属性 是 视频 元 素 <video> 所 
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独 有 的 属性 。 利 用 该 属性 不 仅 可 以 在 视频 文件 开始 播放 前 设置 图 片 ， 还 可 以 通过 视频 元 素 的 
事件 机 制 ， 指 定 在 某 事件 中 改变 该 属性 的 图 片 URL。 例 如 ， 在 播放 视频 的 过 程 中 ， 当 用 户 单 
击 “ 和 暂停 ”或 播放 完成 时 ， 在 相应 的 事件 中 编写 JavaScript 代码 ， 通 过 setAttribute() 方 法 重 
“poster” 属 性 中 图 片 的 URL， 这 样 可 以 根据 不 同事 件 动 态 变 换 图 片 的 效果 。 

样式 文件 css.css 的 具体 实现 代码 如 下 。 


(Q)charset "utf-8"; 

/* CSS Document */ 

body í 
font-size:12px 


E24 


T 


m 


j 
video( 
border:solid #ccc 5px; 
padding:3px; 
background-color:£eee 
j 
/* 实例 5 增加 样式 */ 
Z'spnStatus í 
display:none; 


position:absolute; 
top:105px; 
left:130px; 
background-color:£eee; 
padding:8px; 

} 

/* 实例 7 增加 样式 */ 

#pTool{ 
position:absolute; 
width:340px; 
top:192px; 
left: 16px 


j 

ZpTool span( 
float:left; 
color:#fff; 
font-weight:bold; 
font-size:15px; 
margin-right: 1px; 
background-color:5e5eS5e; 
cursor:pointer; 
text-align:center; 
width:55px; 
line-height:26px; 
height:26px; 
padding:3px 
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/* 实例 8 增加 样式 */ 
#spnResultí 


j 


/[* 


display:none; 
position:absolute; 
font-size:14px; 

top:92px; 

left: 102px; 
background-color:#eee; 
padding:10px; 

border:1px solid #5e5e5e; 
width:160px 


实例 9 增加 样式 */ 


#pTipí 


j 


position:absolute; 
top:9px; 

left:9px; 
width:366px; 
height:31px; 
line-height:31px; 
margin:4px; 
font-weight:bold 


#pTip .spnL{ 


padding:0px 10px Opx 10px; 
float:left; 

color:#fff; 
background-color:#5e5e5e 


j 

#pTip .spnR{ 
padding:Opx 10px Opx 10px; 
float:right; 
color:#fff; 
background-color:#5e5e5e 

j 

执行 后 将 用 户 指 定 的 
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图 5-7 执行 效果 


图 片 作为 待 播放 视频 的 封面 ， 如 图 5-7 所 示 。 
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5.3.2 ”显示 加 载 视频 的 状态 
£ HTML 5 中 , 多 媒体 元 素 <video> 的 “networkState” 属 性 可 以 返回 视频 文件 的 网 络 状态 。 
当 浏 览 器 读 取 视 频 文件 时 会 触发 “progress” 事 件 ， 通 过 该 事件 可 以 获取 视频 文件 在 被 打开 过 
程 中 各 个 不 同 阶段 的 网 络 状态 值 。 其 中 “networkState” 为 只 读 属 性 ， 该 属性 对 应 如 下 4 个 返 
回 值 。 
Q NETWORK EMPTY: 返回 值 为 0， 用 于 数据 加 载 初始 化 。 
O NETWORK IDLE: 返回 值 为 1， 文件 加 载 成 功 ， 等 待 请 求 播 放 。 
口 NETWORK LOADING: 返回 值 为 2， 文 件 正 在 加 载 过 程 中 。 
O NETWORK NO SOURCE: 返回 值 为 3， 表示 加 载 出 错 。 
下 面 通过 一 个 实例 讲解 显示 加 载 视频 的 状态 的 方法 。 


LI 


实例 5-8 说 HJ 
源码 路 径 daima\5\8.html 
功能 显示 加 载 视频 的 状态 


在 本 实例 的 页 面 中 , 分 别 添加 一 个 多 媒体 元 素 <video> 和 一 个 <span> 元 素 。 当 使 用 <video> 
元 素 加 载 视频 文件 时 ， 在 触发 的 “progress ”事件 中 ， 通 过 <span> 元 素 显 示 文 件 在 加 载 过 程 ! 
返回 的 “networkState” 属 性 值 。 实 例文 件 8.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 
«title»«video»networkState 属性 </title> 

<link href-"css.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" language="jscript" 


sre="js8.js"/> 
</script> 
</head> 
<body> 
<div> 
<video id="vdoMain" src="123.ogg" 
width-"360px" height-"220px" 
onProgress-'"Video Progress(this)" 
controls-"true" poster-"123.jpg" 
当前 浏览 器 不 文 持 视 频 ! 
</video> 
«span id="spnStatus"></span> 
<div> 


</body> 


</html> 
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脚本 文件 js8.js 的 具体 代码 如 下 所 示 。 


function $$(id) í 
return document.getElementByld(id); 

j 

function Video Progress(e) í 
var intState = e.networkState; 
$$("spnStatus").style.display = "block"; 
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$$("spnStatus").innerHTML = StrByNum(intState) 


if (intState == 1) í 
$$("spnStatus").style.display = "none"; 
j 


j 
function StrByNum(n) í 
switch (n) í 


case 0: 

return "正在 初始 化 …"; 
case 1: 

return "数据 加 载 完 成 1"; 
case 2: 

return "正在 加 载 中 ……"; 
case 3: 

return "数据 加 载 失 败 !; 
} 


} 


纵览 上 述 人 代码， 媒体 元 素 <video> 在 触发 加 载 视频 文人 


定义 的 函数 Video _Progress0， 此 函数 的 运作 流程 如 下 所 示 。 
直 保存 至 变量 “intState” 中 。 


(1) 将 <video> 元 素 的 “networkState” 属 性 


=E. 件 


时 ， 调 用 


“progress” 


(2) 将 显示 状态 信息 <span> 元 素 的 可 见 样式 设置 


X “block”, 


表示 可 见 。 


(3) 调用 男 一 个 自 定义 的 函数 StByNum0， 将 保存 至 变量 “intState” 中 的 “networkState” 


属性 值 转 成 相应 的 文字 说 明 信 息 ， 并 赋值 
元 素 <span>， 用 于 实现 在 页 面 中 的 动 ; 


态 显 示 效 果 。 
(4) 当 返 回 的 “networkState” 属 性 值 为 “1” 时 ， 


给 显示 状态 


信息 


表示 


数据 加 载 完 成 ， 再 将 显示 状态 信息 <span> 元 素 的 可 见 样 式 


JLEG v 
^ 


设置 


“none”， 即 隐藏 该 元 素 。 
执行 后 的 效果 如 图 5-8 所 示 。 


5.3.3 ”出 错时 在 播放 屏幕 中 显示 出 错 信 息 


F. 、 
”是 二 个 


在 HTML 5 中 ， 属 性 “ 
中 ， 如 果 出 现 异 


error 


下 面 通过 一 个 实例 i 


只 读 必 性， 在 使 月 


图 5-8 执行 效果 


日 多 媒体 元 素 加 载 或 读 取 文件 过 程 
常 或 错误 ,将 触发 元 素 的 “error” 事 件 。 在 该 事件 中 ， 可 以 通过 元 素 的 “error” 
属性 返回 一 个 MediaError 对 象 ， 根 据 该 对 象 的 “code” 属 性 返回 当前 的 错误 值 。 


解 出 错时 在 播放 屏幕 中 显示 出 错 信息 的 方法 。 
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实例 5-9 说 明 
源码 路 径 daima\5\9.html 
功能 出 错时 在 播放 屏幕 中 显示 出 错 信 息 


在 本 实例 的 页 面 中 ， 分 别 添加 了 一 个 多 媒体 元 素 <video> 和 一 个 <span> 元 素 。 当 使 用 
<video> 元 素 加 载 一 个 不 文 持 的 播放 格式 文件 时 触发 “error” 事 件 ， 通 过 <span> 元 素 显 示 加 载 


出 错 后 “error” 属 性 返回 的 错误 代码 信息 。 实 例文 件 9.html 的 实现 代码 如 下 。 
<!DOCTYPE html> 
<html> 
<head> 


<meta charset="utf-8" /> 


<title><video>error 属性 </title> 


<link href="css.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" language="jscript" 
src-"js9.js"/7 
</script> 
</head> 
<body> 
<div> 
<video id="vdoMain" src="123.mm" 
width="360px" height-"220px" 
onError="Video_Error(this)" 
controls="true" poster="123.jpg"> 
你 的 浏览 器 不 支持 视频 
</video> 
<span 1d="spnStatus"></span> 
<div> 
</body> 
</html> 


脚本 文件 js9js 的 实现 代码 如 下 。 


// JavaScript Document 
function $$(id) í 
return document.getElementBylId(id); 
} 
function Video Error(e) í 
var intState = e.error.code; 
$$("spnStatus").style.display = "block"; 
$$("spnStatus").innerHTML = ErrorByNum(intState); 
j 
function ErrorByNum(n) í 
switch (n) í 
case 1: 


return "加 载 异常 ， 用 户 请 求 中 小!"; 
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发 “error” 事 件 。 在 该 事件 
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case 2: 
return "加 载 中 止 ， 网 络 错误 ! "; 
case 3: 
return "加 载 完成 ， 解 码 出 错 "; 
case 4: 


return "不 支持 的 播放 格式 !"; 


} 


在 上 述 代 码 中 ， 因 为 视频 元 素 <video> 不 支持 载 入 文件 “123.mm” 的 播放 格式 ， 所 以 会 触 


(2) 将 该 值 通过 另 一 个 函数 ErorByNum0 返 回 对 应 的 文字 说 明 信 息 。 
(3) 将 获取 的 说 明 信 息 显示 在 页 面 元 素 <span> 中 。 
执行 后 的 效果 如 图 5-9 所 示 。 


不 支持 的 播放 格式 ! 


图 5-9 ”执行 效果 


534 ”检测 浏览 器 是 否 支持 这 个 媒体 类 型 


ËH 


将 调用 函数 Video_Error0， 此 函数 的 执行 流程 如 下 。 
(1) 通过 变量 “intState” 保 存 MediaError 对 象 “code” 属 性 返回 的 错误 代码 值 。 


口 衬 字 符 : 表示 浏览 器 不 支持 该 类 型 的 媒体 文件 。 
O maybe: 表示 浏览 器 可 能 支持 该 类 型 的 媒体 文件 。 
口 probably: 表示 浏览 器 支持 该 类 型 的 媒体 文件 。 

下 面 通过 一 个 实例 讲解 检测 浏览 器 是 否 文 持 媒体 类 型 并 显示 结果 的 方法 。 


为 浏览 器 对 多 媒体 元 素 加 载 媒体 文件 的 类 型 支持 不 同 ， 因 此 在 使 用 多 媒体 元 素 加 载 文 
件 前 需要 检测 当前 浏览 器 是 否 文 持 媒 体 文件 类 型 。 检 测 的 方法 是 通过 调用 多 媒体 元 素 的 
canPlayType(type) 方 法 ， 其 中 参数 “type ”表示 需要 浏览 器 检测 的 类 型 ， 该 类 型 与 媒体 文件 的 
MIME 类 型 一 致 ， 通过 多 媒体 元 素 的 canPlayType(type) 方 法 ， 可 以 返回 如 下 三 个 值 : 


实例 5-10 说 Hj 
源码 路 径 daima\5\10.html 
功能 检测 浏览 器 是 否 支 持 媒体 类 型 并 显示 结果 
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本 实例 的 功能 是 , 使 用 方法 canPlayType 检测 浏览 器 支持 媒体 类 型 的 过 程 。 首先 在 页 面 ! 
添加 一 个 多 媒体 元 素 <video>， 并 在 多 媒体 元 素 的 底部 创建 一 个 <span> 元 素 ， 功 能 是 检测 浏览 
器 是 否 支 持 各 种 媒体 类 型 。 单 击 <span> 元 素 后 将 在 页 面 中 显示 检测 后 的 结果 。 实 例文 件 10.html 
的 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title> 检 测 浏览 器 支持 媒体 类 型 </title> 

<link href="css.css" rel="stylesheet" type="text/css"> 


'jscript" 


<script type="text/javascript" language 
src="Js10.jJs"/> 
</script> 
</head> 
<body> 
<div> 
«video id="vdoMain" src="123.ogg" 
width-"360px" height-"220px" 
poster-"123.jpg"7 
你 的 浏览 器 不 支持 视频 
</video> 
<p id="pTool"> 
«span onClick="v_chkType();"> 检 测 </span> 
</p> 
<span 1d="spnResult"></span> 
<div> 
</body> 
</html> 


脚本 文件 js10jjs 的 具体 实现 代码 如 下 。 


function $$(id) í 
return document.getElementBylId(id); 
j 
var i = 0,j = 0,k = 0; 
function v_chkType() í 
var strHTML=""; 
var arrType = new Array('audio/mpeg;', 'audio/mov;', 


'audio/mp4;codecs-"mp4a.40.2"', 'audio/ogg;codecs="vorbis'", 
Video/webmicodecs="vp8,vorbis", 'audio/wav;codecs-" 1"); 
for (intl = 0; intI < arrType.length; intH+) í 

switch ($$("vdoMain").canPlayType(arrType[intI])) í 

case e 
j-ictl 
break; 
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case "maybe": 
Jail: 
break; 

case "probably": 
k=k+1; 
break; 

j 


"Zu ez 
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srHTML-*-"^^ f: "++"<br>"; 


strHTML+="maybe: "+j+"<br>' 


strHTML+="probably: "+k; 


B 
3 


$$("spnResult").style.display="block"; 
$$("spnResult").innerHTML=strHTML; 


j 


在 上 述 代 码 中 ， 当 用 户 在 页 面 中 单 击 内 容 为 “检测 ”的 <span> 元 素 时 ， 将 调用 一 个 自 定 
义 函 数 v_ chkType0。 此 函数 的 运作 流程 如 下 。 
(OD 定义 一 个 数组 “arrType”， 用 于 保存 各 种 媒体 类 型 及 编码 格式 。 


(2) 遍历 该 数组 中 的 元 素 。 在 遍历 过 程 中 ， 调 用 
多 媒体 元 素 的 canPlayTypeQ77 1E, 对 每 种 类 型 及 编码 
格式 进行 检测 ， 并 将 返回 检测 结果 值 的 累加 总 量 保存 


至 各 自 变量 。 
(3) 将 这 些 变量 值 数据 通过 ID 号 为 

的 元 素 显 示 在 页 面 中 。 

执行 后 的 效果 如 图 5-10 所 示 。 


5.3.5. 显示 视频 的 播放 状态 


+ - £ es iia T W 


" |, EUM ST: Jf ^ f 
spnResult c d. maybe: 0 ` 
" E. probably: 3 


多 媒体 元 素 不 仅 有 相关 的 属性 、 方 法 ， 而 且 该 元 o a 


素 还 有 一 系列 完备 的 事件 机 制 。 在 本 章 前 面 介绍 多 媒体 元 素 的 “networkState” 属 性 与 “error” 


属性 时 ， 分 别 触发 了 “progress” 事 件 与 


“error” 事 件 。 除 此 之 外 ， 还 有 许多 记录 媒体 文件 播 


放 过 程 的 事件 ， 例 如 “playing” 等 。 在 媒体 文件 被 浏览 请 求 加 载 、 开 始 加 载 、 开 始 播放 、 和 暂 


停 播放 、 播 放 结束 这 一 系列 的 流程 中 所 角 


发 的 事件 ， 称 为 “媒体 播放 事件 ”， 也 是 多 媒体 元 素 


的 核心 事件 。 通 过 对 这 些 事件 的 跟踪 ， 可 以 很 方便 地 获取 媒体 文件 在 各 个 阶段 的 播放 状态 。 


下 面 通过 一 个 实例 讲解 显示 当前 正在 播放 视频 的 状态 的 方法 。 


实例 5-11 说 H 
源码 路 径 daima\5\1 1.html 
功能 显示 当前 正在 播放 视频 的 状态 


在 本 实例 的 页 面 中 添加 了 一 个 多 媒体 元 素 <video>， 并 增加 了 “controls” 属 性 ; 同时 通过 


式 ， 将 状态 内 容 显示 在 ID 号 为 “spnPlayTip” 的 页 面 元 素 中 。 实 例文 件 11.html 的 代码 如 下 。 


自 定 义 函 数 绑 定 了 多 个 播放 事件 。 在 事件 中 ， 分 别 记 录 媒 体 元 素 的 即时 状态 ， 并 以 动态 的 方 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 显 示 播 放 状 态 </title> 
<link href-"css.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" language-"jscript" sre="js11.js"/> 
</script> 
</head> 
<body> 
<div> 
«video id-"vdoMain" src="123.ogg" 
width-"360px" height-"220px" controls-"true" 
onMouseOut-"v move(0)" onMouseOver-"v move(1)" 
onPlaying-"v palying()" onPause-"v pause()" 
onLoadStart-"v loadstart();" 
onEnded-"v ended();" 
poster-"123.jpg"7 
你 的 浏览 器 不 支持 视频 
</video> 
<p id="pTip"> 
<span id="spnPlayTip" class="spnL"> 播 放 完 成 </span> 
</p> 
<div> 
</body> 
</html> 


脚本 文件 js11.js 的 实现 代码 如 下 。 
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// JavaScript Document 
function $$(id) í 
return document.getElementById(id); 
} 
function v_move(v)í 
$S("pTip").style.display-(v)?"block":"none"; 
} 


function v_loadstart() í 


$$("spnPlayTip").innerHTMIL=" 开 始 加 载 "; 
} 
function v_palying(){ 
$$("spnPlayTip").innerHTMI=" 正 在 播放 "; 
} 
function v_pause() í 
$$("spnPlayTip").innerHTMI=" 已 经 暂停 "; 
j 
function v ended(){ 
$$("spnPlayTip").innerHTML=" 播 放 完 成 "; 
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通过 上 述 代码 实现 了 鼠标 移 至 多 媒体 元 素 时 显示 媒体 播放 状态 的 功能 ， 在 移出 元 素 时 隐 


藏 播放 状态 。 实 现 方 法 是 在 多 媒体 元 素 的 “onMouseOut” 与 “onMouseOver” 事 件 中 ， 通 过 
传递 不 同 的 参数 值 调用 同一 个 自 定义 的 函数 v_move()。 在 该 函数 中 将 根据 传 回 的 参数 值 ， 显 
示 或 隐藏 ID 号 为 “pTip” 的 页 面 元 素 ， 从 而 实现 鼠标 移 至 或 移出 多 媒体 元 素 的 效果 。 为 了 在 
多 媒体 元 素 触 发 播放 事件 的 过 程 中 ， 动 态 显示 媒体 文件 的 播放 状态 ， 需 要 在 绑 定 的 事件 中 ， 
修改 ID 号 为 “spnPlayTip” 的 元 素 内 容 。 

执行 后 的 效果 如 图 5-11 所 示 。 


图 5-11 执行 效果 


5.3.6 ”显示 播放 视频 的 时 间 信 息 


在 多 媒体 元 素 的 众多 事件 中 ， 事 件 “timeupdate” 是 一 个 十 分 重要 的 事件 。 在 媒体 文件 播 


放 过 程 中 ， 如 果 播 放 位 置 发 生变 化 ， 就 会 触发 该 事件 。 通 过 该 事件 可 以 结合 多 媒体 元 素 的 
“currentTime” 与 “duration” 属 性 ， 可 以 动态 显示 媒体 文件 播放 的 当前 时 间 与 总 量 时 间 。 
下 面 通过 一 个 实例 讲解 显示 播放 视频 时 间 信 息 的 方法 。 


实例 5-12 


说 MJ 


源码 路 径 


daima 5 M2.html 


功能 


显示 播放 视频 的 时 间 信 息 


本 实例 的 功能 是 为 多 媒体 元 素 <video> 添 加 一 个 “onTimeUpdate” 事 件 ， 用 于 改变 播放 文 
件 位 置 时 调用 。 另 外 新 增加 一 个 ID 号 为 “spnTimeTip” 的 <span> 元 素 ， 用 于 动态 显示 媒体 文 


件 播放 的 当前 时 间 与 总 i 


量 时 间 。 实 例文 件 12.html 的 代码 如 下 。 


<!DOCTYPE html> 


<html> 
<head> 


<meta charset="utf-8" /> 

<title> 动 态 显示 媒体 文件 播放 时 间 </title> 

<link href-"css.css" rel="stylesheet" type="text/css"> 
«script type-"text/javascript" language-"jscript" 
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src-"js12.js"/7 

</script> 
</head> 
<body> 
<div> 

«video id="vdoMain" src="123.0gg" 

width="360px" height="220px" controls="true" 
onMouseOut-"v move(0)" onMouseOver-"v move(1)" 
onPlaying-"v palying()" onPause-"v pause()" 
onLoadStart-"v loadstart();" 
onEnded-'v ended();" 
onTimeUpdate-"v timeupdate(this)" 
poster-"123 jpg" 
你 的 浏览 器 不 支持 视频 
</video> 
<p id="pTip"> 
<span id="spnPlayTip" class="spnL"></span> 
<span id="spnTimeTip" class="spnR">00:00 / 00:00</span> 

</p> 
<div> 
</body> 
</html> 


脚本 文件 js12.js 的 主要 实现 代码 如 下 。 


// JavaScript Document 
function $$(id) í 
return document.getElementBylId(id); 

} 

function v move(v)( 
$S("pTip").style.display-(v)?"block":"none"; 

j 

function v loadstart() { 
$$("'spnPlayTip").innerHTMIL=" 开 始 加 载 "; 


} 

function v palying()( 
$$("spnPlayTip").innerHTML-" IE fE REIK"; 

} 

function v_pause() í 
$$("spnPlayTip").innerHTMI" 已 经 暂停 "; 

j 


function v ended(){ 
$$("spnPlayTip").innerHTML=" 播 放 完 成 "; 


} 
function v_timeupdate(e)í 
var strCurTime=RuleTime(Math.floor(e.currentTime/60),2)+":"+ 
RuleTime(Math.floor(e.currentTime%60),2); 
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var strEndTime-RuleTime(Math.floor(e.duration/60),2)--":"-- 
RuleTime(Math.floor(e.duration?9660),2); 
$$("spnTimeTip").innerHTMLestrCurTime-" / "-strEndTime; 
j 
/转换 时 间 显 示 格 式 
function RuleTime(num, n) í 
var len = num.toString().length; 
while(len < n) í 
num = "0" + num; 
lent; 
j 
return num; 


} 


在 上 述 代码 中 ， 当 多 媒体 元 素 触 发 “timeupdate” 事 件 时 调用 自 定 义 函 数 v. timeupdate(); 
通过 该 函数 分 别 使 用 整除 与 求 余数 的 方法 ， 分 割 多 媒体 元 素 当 前 时 间 “currentTime ”属性 与 时 
间 总 量 “duration” 属 性 返回 的 秒 值 ， 最 终 组 成 一 个 分 与 秒 的 格式 。 在 组 成 过 程 中 ， 又 调用 了 另 
外 一 个 自 定义 函数 RuleTime0O， 该 函数 可 以 将 长 度 不 足 2 位 的 数字 ， 在 前 面 加 “0” 进 行 补充 。 

执行 后 的 效果 如 图 5-12 所 示 。 


图 5-12 执行 效果 
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HTML 5 可 以 在 网 页 中 直接 绘制 图 形 图 像 ， 其 功能 甚至 和 专业 的 绘图 软 伯 


章 将 详细 介绍 


BOR 绘图 应 用 详解 


61 ”使 用 <Canvas> 标 记 


<canvas> 标 记 是 在 HTML 5 


在 网 页 中 使 用 HTML 5 技术 绘制 图 形 图 像 的 方法 ， 并 通过 几 个 具体 实例 


一 样 强大 。 本 


大 
来 演示 


TL 


中 新 增 的 一 个 HTML 元 素 ， 此 元 素 可 以 被 JavaScript 语言 使 


用 ， 也 可 以 绘制 图 形 图 像 ， 例 如 可 以 画图 、 合 成 图 象 或 实现 动画 效果 。 标 记 <canvas> 上 共有 画 
布 功 能 ， 画 布 是 一 个 矩形 区 域 , 在 上 面 可 以 控制 其 每 1 个 像素 。HTML 5 中 的 <canvas> 拥 有 多 


种 绘制 图 


形 的 方法 ， 例 如 和 矩形 、 圆 形 、 字 符 以 及 添加 图 像 。 


在 向 HTML 5 页 面 中 添加 <canvas> 元 素 时 ， 需 要 设置 元 素 的 id、 宽 度 值 和 高 度 值 ， 例 如 
下 面 的 代码 。 


<canvas id="myCanvas" width="100" height="100"></canvas> 


标记 <canvas> 本 身 并 没有 绘图 能 力 ， 需 要 在 JavaScript 的 帮助 下 完成 绘制 工作 。 例 如 下 面 


的 代码 。 


使 用 


«script type="text/javascript"> 

var c=document.getElementById("myCanvas"); 
var cxt-c.getContext("2d"); 

cxt. fillStyle="#FF0000"; 
cxt.fillRect(0,0,150,75); 

</script> 


JavaScript 实现 绘图 的 基本 流程 如 下 。 


(1) JavaScript 使 用 id 来 寻找 <canvas> 元 素 ， 例 如 下 面 的 代码 。 


(2) 


对 象 getContext("2d") 是 内 建 的 HTML 5 对 象 ， 它 拥有 多 种 绘制 路 径 、 


以 及 添加 


var c=document.getElementById("myCanvas"); 


创建 context 对 象 ， 例 如 下 面 的 代码 。 


Var cxt-c.getContext("2d"); 


图 像 的 方法 。 例 如 通过 下 面 的 代码 可 以 绘制 一 个 绿 


[GRE 


ext.fillStyle-"4FF0000"; 


^ 


E 形 、 圆 形 、 字 符 


cxt.fillRect(0,0,150,75); 


在 上 述 代码 中 ， 方 法 fillStyle0 的 功能 是 将 矩形 染 成 红色 ， 方 法 包 IRect0 的 功能 
形 的 形状 、 位 置 和 尺寸 ， 标 参 数 为 (0,0,150,75)， 意 思 是 在 画布 上 绘制 


一 个 150X75 的 矩形 ， 并 且 是 从 左上 角 (0,0) 开 始 绘制 的 。 


例如 上 述 代码 设置 了 4 


6.2 HTML DOM Canvas 对 象 


第 6 章 绘图 应 用 详解 


maa 


是 设置 图 


canvas 对 象 表示 一 个 HTML 画布 元 素 <canvas>， 此 对 象 没 有 自己 的 行为 ， 但 是 定义 了 一 


个 API 支持 脚本 化 客户 端 绘 民 


操作 。 用 户 可 以 直接 在 <canvas> 对 象 上 指定 宽度 和 高 度 ， 但 是 


其 大 多 数 功能 都 可 以 通过 CanvasRenderingContext2D 对 象 来 获得 。 这 是 通过 <canvas> 对 象 的 
getContext0 方 法 并 且 把 直接 量 字符 串 “2D” 作 为 唯一 的 参数 传递 给 它 而 获得 的 。 


1. canvas 对 象 的 属性 


在 对 象 <canvas> 中 有 如 下 两 个 重要 属性 。 


(1) height 属性 
FU “height” 表示 画布 的 高 度 。 和 一 由 图像 


值 或 者 是 窗口 高 度 的 百分比 。 当 改变 这 个 值 的 
除 掉 。 默 认 值 是 “300?”。 
(2) width 属性 


= 


者 是 窗口 宽度 的 百分比 。 当 改变 这 个 值 的 时 候 ， 在 该 画布 上 会 擦 除 掉 已 经 完成 的 所 有 绘图 。 


默认 值 是 “300”。 


n 


canvas 对 象 的 方法 
对 象 <canvas> 只 有 一 个 方法 : getContext()， 此 方法 月 


PE "width" zii gg e. Rs EL 


FE， 此 属性 可 以 指定 为 一 个 整数 像素 值 或 


EFE， 通 过 此 属性 可 以 指定 为 一 个 整数 像素 
时 候 ， 在 该 画布 上 已 经 完成 的 任何 绘图 都 会 擦 


tsi 


境 。 使 用 方法 getContext0 的 语法 格式 如 下 。 


Canvas.getContext(contextID) 


日 于 返回 一 个 用 于 在 画布 上 绘图 的 环 


<canvas> 元 素 中 。 


的 绘制 类 型 (2 维 、3 维 ) 提供 


AE 


参数 contextID 指定 了 想 要 在 画布 上 绘制 的 类 型 。 当 前 唯一 的 合法 值 是 “2D”， 人 它 指定 了 
维 绘图 ， 并 且 导 致 这 个 方法 返回 
不 久 的 将 来 ，<canvas> 标 签 会 扩展 到 支持 3D 绘图 
一 个 “3D” 字 符 串 参数 。 

方法 getContext0 的 返回 值 
此 可 见 , 方法 getContext() 的 功 


一 个 环境 对 象 ， 该 对 象 导出 一 个 二 维 绘图 API。 很 可 能 在 
， 此 时 用 getContext0 方 法 就 可 以 允许 传递 


是 一 个 CanvasRenderingContext2D 对 象 ， 使 用 它 可 以 绘制 到 
能 是 返回 一 个 用 来 绘制 的 环境 类 型 的 环境 ， 


不 同 的 环境 。 


下 面 通过 一 个 实例 讲解 显示 矩形 中 的 某 个 鼠标 坐标 的 方法 。 
实例 6-1 说 HJ 
源码 路 径 daima\6\1.html 

功能 显示 矩形 中 的 某 个 鼠标 的 坐标 
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本 实例 的 功能 是 在 网 页 中 绘制 一 个 矩形 ， 当 用 户 将 鼠标 放 在 矩形 内 的 某 一 个 位 置 时 ， 会 
显示 鼠标 的 坐标 。 实 例文 件 I 具体 代码 如 下 。 


<!DOCTYPE HTML- 

<html> 

<head> 

«style type="text/css"> 

body 

{ 

font-size:70%; 
font-family:verdana,helvetica,arial,sans-serif; 
} 


</style> 


T 
= 
= 
= 

E. 
= 


KI 


<script type="text/javascript"> 

function cnvs_getCoordinates(e) 

{ 

x=e.clientX; 

y=e.clientY; 

document. getElementById("xycoordinates").innerHTML="Coordinates: (" +x + "," +y + ")'; 


j 


function envs clearCoordinates() 


{ 


document. getElementById("xycoordinates").innerHTML=""; 


} 
</script> 
</head> 


<body style="margin:0px;"> 


<ER HE FREE EAA: </p> 


«div id="coordiv" style="float:left;width:199px;height:99px;border: 1px solid #c3c3c3" onmousemove = 
"cnvs getCoordinates(event)" onmouseout="cnvs clearCoordinates()"></div> 

<br /7 

<br /> 

<br > 


«div id="xycoordinates"></div> 


</body> 


</html> 
执行 之 后 的 效果 如 图 6-1 所 示 。 
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Coordinates: (97,70) 


图 6-1 执行 效果 


6.3 HMI 5 绘图 实践 


在 上 面 的 内 容 中 ， 已 经 讲解 了 使 用 HTML 5 2 22] 
\ 体 实例 的 实现 过 程 ， 来 提高 读者 的 开发 水 平 。 


N 


6.3.1 


o 


= 
A 


如 形 图 像 的 基本 知识 ， 本 节 将 通过 


在 指定 位 置 绘 制 指定 角度 的 相交 线 


下 面 将 通过 一 个 具体 实例 的 实现 过 程 ， 讲 解 在 网 页 中 的 指定 坐标 位 置 绘制 指定 角度 的 相 


交 线 的 方法 。 


实例 6-2 说 gj 
源码 路 径 daima\6\2.html 
功能 在 网 页 中 的 指定 坐标 位 置 绘制 指定 角度 的 相交 线 


实例 文件 2.html 的 具体 代码 如 下 。 


«IDOCTYPE HTML> 
<html> 
<body> 


«canvas id="myCanvas" width="200" height="100" style-"border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 


«script type="text/javascript"> 


var c=document.getElementById("myCanvas"); 
var cxt-c.getContext("2d"); 
cxt.moveTo(10,10); 

ext.lineTo(150,50); 

ext.lineTo(10,50); 

cxt.stroke(); 
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</script> 


</body> 
</html> 


执行 之 后 的 效果 如 图 6-2 所 示 。 ~ 
6.3.2 ”绘制 一 个 圆 
下 面 将 通过 一 个 具体 实例 讲解 在 网 页 中 绘制 一 个 圆 的 方法 。 | 
能 是 


本 实例 的 功能 是 ， 在 网 页 中 绘制 一 个 填充 红颜 色 的 圆 。 "" 
实例 6-3 说 HJ 
源码 路 径 daima 6 3.html 
功能 在 网 页 中 绘制 一 个 圆 


实例 文件 3.html 的 具体 代码 如 下 。 


<!DOCTYPE HTML> 
<html> 
<body> 


I 


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 


</canvas> 
«script type="text/javascript"> 


var c-document.getElementBylId("myCanvas"); 
var cxt-c.getContext("2d"); 
ext.fillStyle-" 7 FF0000"; 

cxt.beginPath(); 

cxt.arc(70,18,15,0, Math.PI*2,true); 
cxt.closePath(); 

ext.fill(); 


</script> 


</body> 


</html> 


执行 之 后 的 效果 如 图 6-3 所 示 。 
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633 ”在 画布 中 显示 一 幅 指定 的 图 片 o 


下 面 将 通过 一 个 实例 讲解 在 <canvas> 画 布 中 显示 一 幅 指 定 的 
图 片 的 方法 。 本 实例 的 功能 是 , 在 <canvas> 画 布 中 显示 一 幅 指定 的 


图 片 。 图 6-3 执行 效果 
实例 6-4 说 gj 
源码 路 径 daimaV6M.html 
功能 在 Canvas 画布 中 显示 一 幅 指 定 的 图 片 


实例 文件 4.html 的 具体 代码 如 下 所 示 。 


<!DOCTYPE HTML> 
<html> 
<body> 


«canvas id="myCanvas" width="600" height-"800" style="border: 1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 


</canvas> 
«script type="text/javascript"> 


var c=document.getElementById("myCanvas"); 
var cxt-c.getContext("2d"); 

var img-new Image() 

img.src-"http imgload.jpg" 
cxt.drawImage(img,0,0); 


</script> 


</body> 
</html> 


执行 之 后 的 效果 如 图 6-4 所 示 。 


图 6-4 执行 效果 
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6.3.4 ”绘制 一 个 指定 大 小 的 正方 形 


与 创建 页 面 中 的 其 他 元 素 相 同 , 创建 <canvas> 元 素 的 方法 也 只 需要 加 一 个 标记 ID 号 并 设 


置 元 素 的 长 和 宽 即 可 ， 具 体格 式 如 下 所 示 : 
<canyas id="cnyMain" width="2 80px" height= "190px" ></canvas> 


创建 画布 后 ， 就 可 以 利用 画布 的 上 下 文 环境 对 象 绘制 图 形 了 。 


P"? 


下 面 将 通过 一 个 实例 讲解 在 <canvas> 画 布 中 绘制 一 个 指定 大 小 的 正方 形 的 方法 。 


实例 6-5 说 明 
源码 路 径 daima\6\5.html 
功能 在 Canvas 画布 中 显示 一 幅 指 定 的 图 片 


本 实例 的 功能 是 在 页 面 中 新 建 一 个 <canvas> 元 素 ， 并 在 该 元 素 中 
方形 。 实 例文 件 5.html 的 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title>canvas 简单 示例 </title> 

<link href-"css.css" rel="stylesheet" type="text/css"> 


<script type="text/javascript" language="jscript" 
sre="js5.js"/> 

</script> 
</head> 
<body onLoad="pageload();"> 

«canvas id-"cnvMain" width="280px" height="190px"></canvas> 
</body> 
</html> 


羊 式 文件 css.css 的 代码 如 下 。 


@charset "utf-8"; 
body í 
font-size: 12px 


> 


j 

canvas í 
border:dashed 1px #666; 
cursor:pointer 

j 

PROFES, */ 

pi 
position:absolute; 
height:23px; 


line-height:23px; 
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margin-left: 1 0px 


} 

span { 
padding:3px; 
border:solid 1px #ccc; 
background-color:#eee; 
cursor:pointer 

j 


脚本 文件 js5.js 的 代码 如 下 所 示 。 


// JavaScript Document 
function $$(id) í 
return document.getElementById(id); 


} 

function pageload(){ 
var cnv=$$("cnv Main"); 
var Cxt=cnv.getContext("2d"); 
cxt.fillStyle="#ccc"; 
ext.fillRect(30,30,80,80); 

j 


上 述 代 人 码 首先 获取 了 <canvas> 元 素 ， 然后 取得 绘图 元 素 的 上 下 文 环境 对 象 “cxt”。 在 获取 
过 程 中 ， 需 要 调用 画布 的 getContext(0 方 法 ， 并 向 该 方法 传递 一 个 字符 串 为 “2d” 的 参数 。 一 
旦 取得 画布 的 上 下 文 环境 对 象 ， 就 可 以 通过 该 对 和 象 来 使 用 绘图 的 方法 与 属性 。 下 面 是 绘制 一 
个 矩形 的 方法 : 


cxt.fillRect (x,y,width, height); 


HR, Si x” RIERA x 轴 与 左上 角 (0，0) 间 的 距离 ， 参 数 “y” 表 示 算 形 起 点 y 
轴 与 左上 角 (0，0) 的 距离 ， 参 数 “width” 表 示 和 矩形 的 宽度 ， 参 数 “height” 表 示 和 矩形 的 高 度 ， 
其 所 在 位 置 如 图 6-5 所 示 。 


图 6-5 执行 效果 


在 绘制 矩形 之 前 ， 需 要 设置 图 形 的 背景 色 ， 方 法 如 下 : 


cxt.fillStyle="background-color"; 
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本 实例 为 


I HTML 5 开发 从 入 门 到 精通 | 
其 中 ， 参 数 “background-color” 可 以 是 一 种 CSS 颜色 、 图 案 、 渐 变色 ， 默 认 值 为 黑色 


“#cc”， 是 一 种 CSS 颜色 。 注 意 ， 设 置 绘制 图 形 背景 色 的 操作 必须 先 于 图 形 绘制 


否则 设置 的 背景 色 将 不 起 作用 。 
6.3.5 ”绘制 一 个 带 边 框 的 矩形 


° 


, 


利用 画布 除了 可 以 绘制 有 背景 色 的 图 形 外 ， 还 可 以 绘制 有 边框 的 图 形 。 有 具体 过 程 是 在 获 
取 绘 图 上 下 文 环 境 对 象 “cxt” 后 ， 调 用 一 个 strokeRect0 方 法 。 该 方法 用 来 绘制 一 个 和 矩形， 但 


并 不 填充 矩形 区 域 ， 而 是 绘制 矩形 的 边框 ， 其 调用 格式 如 下 : 


其 中 
绘制 边框 


其 


` 


如 果 想 要 


cxt.strokeRect (x,y,width, height); 


参数 “x”，“y” 为 矩形 起 点 坐标 ,“width” 与 “height” 分 别 为 矩形 宽度 与 高 度 。 在 


前 ， 可 以 调用 “strokeStyle” 属 性 设置 边框 的 颜色 ， 具 体格 式 如 下 : 


cxt. strokeStyle="background-color"; 


， 参 数 “background-color” 表 示 边 框 的 颜色 ， 可 以 是 一 种 CSS 值 、 图 案 或 渐变 色 。 


清空 图 形 中 指定 区 域 的 像素 ， 可 以 调用 男 一 个 方法 clearRect0， 调 用 格式 如 下 : 


cxt. clearRect (x,y, width, height); 


其 中 ， 参 数 “x”，“y” 为 被 清空 色彩 区 域 起 点 的 坐标 ,“width” 与 “height” 分 别 为 被 清 
空 像素 区 域 的 宽度 与 高 度 ， 清 空 后 的 区 域 变 为 透明 色 。 
下 面 将 通过 一 个 实例 讲解 在 网 页 中 绘制 一 个 带 边 框 的 矩形 的 方法 。 
实例 6-6 说 — W 
源码 路 径 daima 6 6.html 
功能 在 网 页 中 绘制 一 个 带 边 框 的 矩形 


在 本 


HZ 


单 


E 
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实例 中 新 建 了 一 个 <canvas> 元 素 ， 并 在 该 元 素 中 绘制 一 个 有 背景 色 和 边框 的 矩形 。 
形 时 会 清空 矩形 中 指定 区 域 的 图 形 色彩 。 实 例文 件 6.html 的 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title>canvas 元 素 绘制 带 边 框 矩形 </title> 

<link href-"css7.css" rel="stylesheet" type="text/css"> 

<script type="text/javascript" language="jscript" 
sre="js100.js"/> 


</script> 
</head> 
<body onLoad="pageload();"> 
«canvas id-"cnvMain" width="280px" height=" 190px" 
onClick="cnvClick();"> 
</canvas> 
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</body> 


</html> 


于 方法 fllRect0 与 strokeRect() 方 法 中 所 使 用 的 参数 值 相同 ， 


定义 函数 cnvClickO0。 在 该 函数 中 ， 使 用 clearRect()J7 1538 47 


编写 脚本 文件 js6.js， 当 开始 加 载 页 面 时 会 调用 一 个 自 定 义 的 函数 pageload0。 此 函数 使 
用 fillRect0 方 法 绘制 带 背 景色 的 图 形 ， 此 外 还 调用 了 strokeRect0 方 法 绘制 带 边框 的 图 形 。 
在 调用 方法 strokeRect0 前 ， 先 通过 “strokeStyle” 属 性 设置 所 绘制 边框 的 颜色 为 “#666”。 


因此 将 绘制 一 个 背景 色 和 边 


框 重 辣 的 矩形 。 当 用 户 单 击 绘制 好 的 矩形 时 ， 将 触发 一 个 “onClick” 事 伯 
指定 


的 代码 如 下 。 


function $$(id) í 
return document.getElementByld(id); 
j 
function pageload() í 
var cnv=$$("cnv Main"); 
var cxt=cnv.getContext("2d"); 
/设置 边框 
cxt.strokeStyle="#666"; 
cxt.strokeRect(30,30,150,80); 
/设置 背景 
cxt.fillStyle="#eee"; 
cxt.fillRect(30,30,150,80); 


} 
function envClick() í 
var cnv=$$("cnv Main"); 
var cxt=cnv.getContext("2d"); 
// 清 空 图 形 
cxt.clearRect(36,36,138,68); 


} 
执行 后 的 效果 如 图 6-6 所 示 。 


文件 到 ) 


6.3.6 ”绘制 一 个 渐变 图 形 «isl 


as 元 素 绘 制 带 边框 矩形 - Nozilla Firef, 
REO SEV ”历史 (5) ”书签 @) IAW WM 
BBE | 站 通过 路 径 画 … | 门 GR ean cm 


FE， 该 事件 调用 自 
区 域 的 色彩 。 文 件 js6.js 


| 口 | xi 


° 


TCR CAE 


在 HTML 5 中 ， 利 用 <canvas> 元 素 可 以 绘制 出 有 浙 
变色 的 图 形 。 渐 变 方式 分 为 两 种 ， 一 种 是 线性 渐变 ， 另 
一 种 是 径 向 渐变 。 使 用 线性 渐变 的 方式 绘制 图 形 的 步 又 
如 下 : 

(1) 在 获取 上 下 文 环 境 对 象 “cxt” 后 ， 调 用 该 对 象 
的 createLinearGradient() 方 法 创建 一 个 “LinearGradient” 
对 象 ， 调 用 格式 如 下 : 


cxt.createLinearGradient (xStart, yStart, xEnd, yEnd) 


其 中 ， 参 数 “xStart”，“yStart” 表 示 渐 变色 开始 时 的 坐标 ; 


图 6-6 执行 效果 


“xEnd a “yEnd » 为 渐变 色 结 
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束 时 的 坐标 。 如 果 “yStart” 与 “yEnd” 相 同 , 表示 渐变 色 沿 水 平方 向 从 左 向 右 渐 变 ; 如 果 “xStart” 
与 “xEnd” 相 同 ， 表 示 渐 变色 沿 纵 坐 标 方 向 上 下 渐变 ;如 果 “xStart” 与 “xEnd” 不 相同 ， 并 
且 “yStart” 与 “yEnd” 也 不 相同 ， 则 表示 渐变 色 治 和 窍 形 对 角 线 方向 渐变 。 

(2) 创建 “LinearGradient” 对 象 并 将 其 取 名 为 “gnt” 后 ， 调 用 该 对 象 的 addColorStopO 
方法 ， 进 行 渐变 颜色 与 偏 移 量 的 设置 ， 调 用 格式 如 下 ; 


gnt. addColorStop (value, color); 


其 中 ,参数 “Value” 表 示 渐 变 位 置 偏 移 量 ， 它 可 以 在 0 与 1 之 间 取 任意 值 ， 参数 “color” 
表示 渐变 开始 与 结束 时 的 颜色 ,分 别 对 应 偏 移 量 0 与 1。 为 了 实现 颜色 的 渐变 功能 ， 必 须 调 用 
两 次 该 方法 ， 第 一 次 表示 开始 渐变 时 的 颜色 ， 第 二 次 表示 结束 渐变 时 的 颜色 。 

(3) 通过 “gnt” 对 象 将 偏 移 量 与 渐变 色 的 值 设 置 完 成 后 , 再 将 “gnt” 对象 赋 值 给 “filIStyle” 
属性 ， 表 明 此 次 图 形 的 样式 是 一 个 渐变 对 象 ， 最 后 ， 使 用 filIRect0 方 法 绘制 出 一 个 有 渐变 色 
的 图 形 。 


下 面 将 通过 一 个 实例 讲解 在 网 页 中 绘制 一 个 渐变 图 形 的 方法 。 
实例 6-7 说 HJ 
源码 路 径 daima\6\7.html 
功能 在 网 页 中 绘制 一 个 渐变 图 形 


本 实例 新 建 了 一 个 <canvas> 元 素 ， 并 利用 该 元 素 以 三 种 不 同 颜色 渐变 方向 绘制 图 形 ， 分 
别 为 自 左 向 右 、 从 上 而 下 、 沿 图 形 对 角 线 方 向 渐变 。 实 例文 件 7.html 的 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title> 使 用 <canvas> 元 素 绘制 有 渐变 色 的 图 形 </title> 
<link href-"css.css" rel="stylesheet" type="text/css"> 


'jscript" 


<script type="text/javascript" language= 
src="Js7.Js"/> 
</script> 
</head> 
<body onLoad="pageload();"> 
<canvas id="cnvMain" width="280px" height="190px"></canvas> 
</body> 


</html> 
脚本 文件 js7js 的 代码 如 下 。 


// JavaScript Document 
function $$(id) í 
return document.getElementById(id); 


j 
function pageload() í 
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var cnv-$$("envMain"); 

var cxt-cnv.getContext("2d"); 
/绘制 由 左 至 右 的 颜色 渐变 图 形 
var gntl=cxt.createLinearGradient(20,20,150,20); 
gnt1.addColorStop(0, 72000"); 
gnt1.addColorStop(1, fff"); 
cxt.fillStyle-gntl; 
cxt.fillRect(20,20,150,20); 
/绘制 由 上 至 下 的 颜色 渐变 图 形 
var gnt2—cxt.createLinearGradient(20,20,20,150); 
gnt2.addColorStop(0," 7:000"); 
gnt2.addColorStop(1, fff"); 
ext.fillStyle-gnt2; 
cxt.fillRect(20,20,20,150); 
/绘制 沿 对 角 线 的 颜色 渐变 图 形 
var gnt3—cxt.create LinearGradient(50,50,100,100); 
gnt3.addColorStop(0," 72000"); 
gnt3.addColorStop(1, Zfff"); 
cxt.fillStyle-gnt3; 
ext.fillRect(50,50,100,100); 


j 
执行 后 的 效果 如 图 677 所 示 。 


图 6-7 执行 效果 


6.3.7 绘制 不 同 的 圆 形 


在 HIML 5 网 页 中 ， 可 以 使 用 上 下 文 环境 对 象 中 的 方法 arc0 来 描绘 圆 形 路 径 和 各 种 形状 
的 圆 形 图 案 。 调 用 该 方法 的 格式 如 下 ; 
cxt.arc (x,y,radius, startAngle, endAngle, anticlockwise) 
口 参数 cxt: 表示 上 下 文 环 境 对 象 名 称 。 


O 参数 x: 表示 绘制 圆 形 的 横 坐 标 。 
CQ 参数 y: 表示 绘制 圆 形 的 纵 坐 标 。 
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明 开 始 


其 
循环 绘制 路 径 时 ， 


次 的 路 径 绘 人 
并 没有 真 了 
边 或 填充 。 如 果 是 


O 参数 radius: 表示 绘制 圆 的 半径 ， 单 
O 参数 startAngle: 表示 绘制 


束 角度 。 


在 调 上 


zd 


其 中 ,“cxt” 为 上 下 文 环境 对 象 名 称 。 该 方法 的 参数 与 beginPath(0) 方 法 
央 。 在 一 般 情 况 下 ， 该 方法 与 beginPath() 方 法 是 成 对 出 现 的 。 绘 制 完 圆 形 路 径 后 ， 


rH 


cxt .beginPath() 


日 方法 arcO 绘 制 
草 路 径 。 其 调用 格式 如 下 : 


圆 形 路 径 之 前 ， 需 要 调用 -| 


" 


E] JE RE 


参数 “endAngle” 表 示 


圆 弧 时 的 结 


上 下 文 环境 对 象 中 的 beginPath0 方 法 ， 声 


,“cxt” 表 示 上 下 文 环境 对 象 名 称 ， 该 方法 无 参数 。 需 要 注意 的 是 ， 在 使 用 遍历 或 


cxt. closePath() 


每 次 都 要 调用 该 方法 ， 即 该 方法 仅 对 应 单 次 的 路 径 
径 后 ， 还 要 调用 closePath(0) 方 法 ， 将 所 


H| EA 


样 ， 也 是 对 应 单 


E 在 画布 元 素 中 展示 ， 因 


以 设置 边框 的 颜色 与 宽度 。 代 码 如 下 : 


cxt.strokeStyle="#ccc"; 
cxt .lineWidth-2: 


cxt.stroke(); 


2 Ere EIER 
边 ， 则 调用 上 下 文 环境 对 象 中 的 stroke0) 方 法 。 在 调用 该 方法 2 


¿= 


圆 形 的 路 径 ， 还 需要 对 路 径 进行 描 
前 ， 还 可 


上 述 代码 的 第 一 行 表示 设置 边框 的 颜色 ， 第 二 行 表示 设置 边框 的 宽度 ， 第 三 行 表示 开始 


作用 。 


填充 操作 。 当 然 帮 


可 以 对 所 


下 面 将 通过 一 个 实例 


除了 对 已 经 绘制 的 圆 形 路 径 进 行 
E 调 用 该 方法 之 前 也 可 以 设置 填充 的 颜 


cxt. fillStyle="#eee"; 


-EXSAUI TS Mr SUCEDE BUE nt, 5 
作 一 样 ， 设 置 填充 圆 形 路 径 的 颜色 的 代码 必须 在 
绘制 的 圆 形 路 径 进行 既 填 充 又 描 边 的 操作 。 
E 网 页 中 绘制 不 同 的 圆 形 的 方法 。 


进行 描 边 操作 。 需 要 注意 的 是 ， 设 置 边 


EE 颜 色 与 宽度 的 代码 必须 在 描 边 操 


作 前 ， 和 否则 将 不 起 


边 外 ， 还 可 以 调用 上 下 文 环境 对 象 中 的 fl10 方 法 进行 


ext.fill(); 


真 充 操作 之 前 ， 和 否则 将 不 起 作 有 


ft, 


实例 6-8 


行 填充 。 与 描 边 操 
Ho 当然 ， 也 


源码 路 径 


daima\6\8.htm 


体 


"za 


K 


功能 


在 本 实例 中 新 建 了 一 个 <canvas> 元 素 ， 同 时 创建 了 三 个 <span> 标 记 ， 内 容 分 别 


p". “UE |l H”. 当 单 击 某 个 <span> 标 记 时 , 在 画布 元 素 


列 文人 
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n e 衔接 
F 8.html 的 代码 如 下 。 


在 网 页 中 绘 由 


为 “ 实 


的 圆 形 。 


数 的 运作 流程 如 下 。 


100), ` 


绘制 图 形 时 使 用 了 stroke0 方 法 对 路 径 进 行 
进行 
用 stroke0 方 法 ， 按 照 设 置 的 颜色 与 宽度 对 


3f 


«IDOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 
<title> 通 过 路 径 画 圆 形 </title> 


<link href-"css.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" language="jscript" 


src="Js8.Js"/> 
</script> 
</head> 
<body> 
<div><p> 
<span onClick="spn1_click(); 
<span onClick-"spn2 click(); 
«span onClick-"spn3 click(); 


心 实体 


E 


</span> 


"UJ JE 


E 


</span> 


心 衔接 加 
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</span></p> 


<canvas id="cnvMain" width="280px" height="190px"></canvas> 


<div> 
</body> 
</html> 


编写 脚本 文件 js8js， 设 置 当 单 击 “ 实 体 


(1) 通过 获取 的 上 下 文 环境 对 象 “cxt” 来 调用 cl 
防止 图 形 在 画布 中 的 交叉 展示 ; 然后 ， 调 用 arc(0 方 法 绘制 一 个 圆 形 路 径 ， 其 圆心 坐标 为 (100， 


(2) 绘制 路 径 完成 后 开始 设置 填 
(3) 使 用 f0 方 法 将 颜色 填充 至 


EIH 50 像素 ， 弧 度 为 从 0 开始 到 Math.PI*2 结束 、 按 顺 时 针 方向 进行 绘制 。 


充 颜 色 。 


已 绘制 
在 自 定 义 函 数 spn2_click0 中 ， 绘 制 圆 天 


WS 


DARJ, XXX "lineWidth" 5j *strokeStyle" Jš 


的 圆 路 径 


圆 ”标记 时 会 调用 自 定 义 函 数 spnl_click0， 此 函 


earRect(0 方 法 ， 清 空 画 布 中 原 有 的 图 形 ， 


中 ， 从 而 在 画布 中 形成 一 个 实体 圆 形 。 


路 径 的 过 程 与 spnl _ clickO 函 数 相 同 ， 只 是 在 最 后 


匡 圆 。 在 自 定 义 函 数 spn3. click()! 


文件 js8js 的 代码 如 下 。 
function $$(id) í 


n 
， 结 合 


return document.getElementById(id); 


j 
function spnl click()1 
var cnv-$$("cnvMain"); 
var cxt-cnv.getContext("2d"); 
/清除 画布 原 有 图 形 
cxt.clearRect(0,0,280,190); 
/开始 画 实体 圆 


边 ， 而 非 spnl_clickO 函 数 中 的 人 10 填 充 方法 。 在 


己 绘 制 的 圆 


函数 sp 


法 与 过 程 ， 只 是 在 绘制 第 二 个 圆 形 时 ， 改 变 了 圆心 的 


L7] 7] 


:分 别 设置 边框 的 宽度 与 颜色 ， 最 后 ， 使 


路 径 进 行 描 边 ， 从 而 在 画布 中 形成 一 个 
nl_click() 与 spn2_click() 中 绘制 圆 形 的 方 
黄 坐 标 距 离 ， 而 其 他 参数 值 均 不 变化 。 
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j 


cxt.beginPath(); 

cxt.arc(100,100,50,0, Math.PT*2,true); 
cxt.closePath(); 

/设置 填充 背景 

cxt.fillStyle="#eee"; 

/进行 填充 
cxt.fill(); 


function spn2 click() í 


j 


var env-$$("envMain"); 


var cxt-cnv.getContext("2d"); 
/清除 画布 原 有 图 形 
cxt.clearRect(0,0,280,190); 
// 开 始 画 边框 圆 
cxt.beginPath(); 
cxt.arc(100,100,50,0,Math.PI*2,true); 
cxt.closePath(); 
/设置 边框 色 
cxt.strokeStyle="#666"; 
/设置 边框 宽度 
cxt.lineWidth-2; 
/进行 描 边 
cxt.stroke(); 


function spn3_click() í 


var cnv=$$("cnvMain"); 


var cxt-cnv.getContext("2d"); 
// 清 除 画 布 原 有 图 形 
cxt.clearRect(0,0,280,190); 
FFAA m 
cxt.beginPath(); 
cxt.arc(100,100,50,0,Math.PI*2,true); 
cxt.closePath(); 
/设置 填充 背景 
cxt.fillStyle="#eee"; 
/进行 填充 
ext.fill(); 
/设置 边框 色 
cxt.strokeStyle="#666"; 
/设置 边框 宽度 
cxt.lineWidth-2 
/进行 描 边 
cxt.stroke(); 
/开始 画 衔接 的 边框 
cxt.beginPath(); 
cxt.arc(175,100,50,0,Math.PI*2,true); 


= 


Pam 
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cxt.closePath(); 
// 设 置 边框 色 
cxt.strokeStyle="#666"; 
/设置 边框 宽度 
cxt.lineWidth-2 
/进行 描 边 


cxt.stroke(); 


j 


执行 后 的 效果 如 图 6-8 所 示 。 和 


6.3.8 


| 4B SE dum 
绘制 一 个 渐变 圆 形 


使 用 径 向 渐变 的 方式 可 以 绘制 有 渐变 色 的 圆 形 , 只 要 调用 


上 下 文 环境 对 象 “cxt” 中 的 create RadialGradient() 方 法 即 可 。 


具体 格式 如 下 : 


cxt.createRadialGradient (xStart ,yStart, radiusStart, xEnd,yEnd, PAN 
` x 图 6-8 执行 效果 


radiusEnd) 


口 


DODCDLDGOCD6oLU 


参数 cxt: 表示 获取 的 上 下 文 对 象 名 称 。 

参数 xStart: 表示 开始 渐变 圆心 的 横 坐 标 。 

参数 yStart: 表示 开始 渐变 圆心 的 纵 坐 标 。 

参数 radiusStart: 表示 开始 渐变 圆 的 半径 。 

参数 xEnd: 表示 结束 渐变 圆心 的 横 坐 标 。 
Z 


参数 yEnd: 表示 结束 渐变 圆心 的 纵 坐 标 。 
参数 radiusEnd: 表示 结束 渐变 圆 的 半径 。 


在 调用 createRadialGradient() 方 法 时 ， 从 开始 渐变 圆心 的 坐标 位 置 向 结束 渐变 圆心 的 坐标 
位 置 进行 颜色 渐变 ， 即 两 个 圆 之 间 通 过 各 自 的 圆心 坐标 连接 成 一 条 直线 ， 起 点 为 开始 圆心 ， 
终点 为 结束 圆心 ， 色 彩 由 起 点 向 终点 进行 扩散 ， 直 至 终点 圆 外 框 。 使 用 方法 createRadial 


Gradient() 仅 新 建 了 一 个 径 向 渐变 的 对 象 , 接 下 来 需要 通过 方法 addColorStop0 为 该 对 象 添加 1 
移 量 与 渐变 色 ， 并 将 该 对 象 设置 为 “fillStyle” 属 性 的 值 。 最 后 ， 调 用 方法 fill0 在 画布 中 绘 第 
出 一 个 有 径 向 渐变 色彩 的 圆 形 。 


=F 


<t 
c 


下 面 将 通过 一 个 实例 讲解 在 网 页 中 绘制 一 个 渐变 圆 形 的 方法 。 


实例 6-9 说 gj 
源码 路 径 daima 6 9.html 
功能 在 网 页 中 绘制 一 个 渐变 圆 形 


在 本 实例 的 页 面 中 新 建 了 一 个 <canvas> 元 素 ， 当 加 载 页 面 时 通过 调用 方法 createRadial 
GradientO 创 建 一 个 渐变 对 象 ， 将 该 对 象 设 置 为 “fillStyle” 属 性 的 值 ， 在 画布 中 绘制 一 个 径 向 
渐变 的 圆 。 实 例文 件 9.html 的 代码 如 下 。 


<!DOCTYPE html> 
<html> 
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<head> 

<meta charset="utf-8" /> 

<title> 绘 制 径 向 渐变 的 圆 </title> 

<link href-"css.css" rel="stylesheet" type="text/css"> 


'jscript" 


六 


«script type-"text/javascript" language 
sre="js9.js"/> 

</script> 

</head> 

<body onLoad="pageload();"> 
«canvas id-"cnvMain" width="280px" height="190px"></canvas> 

</body> 

</html> 


编写 脚本 文件 js9.js, 设置 当 获 取 上 下 文 环境 对 象 “cxt” 后 , 首先 调用 该 对 象 的 createRadial 
Gradient0 方 法 创建 一 个 渐变 对 象 “gnt” 然后 通过 “gnt” 对 象 的 addColorStop() 方 法 ， 为 渐变 
对 象 增 加 三 种 用 于 渐变 的 偏 移 量 与 颜色 值 ， 当 绘制 完 圆 路 径 后 ， 将 渐变 对 象 “gnt” 赋 值 给 
“fillStyle ”属性 ; 最 后 根据 “fillStyle” 属 性 值 ， 使 用 方法 f0 在 画布 中 绘制 一 个 有 径 向 渐变 
的 圆 形 图 案 。 为 了 增加 实体 圆 的 边框 效果 ， 以 相同 的 参数 再 次 调用 arc0 方 法 ， 在 实体 圆 的 基 
础 上 绘制 一 个 边框 圆 形 。 文 件 js9.js 的 代码 如 下 。 

function $$(id) í 

return document.getElementById(id); 


i 
m 


J 
function pageload() í 

var env-$$("envMain"); 

var cxt-cnv.getContext("2d"); 

/开始 创建 渐变 对 象 
var gnt-cxt.createRadialGradient(30,30,0,20,20,400); 
gnt.addColorStop(0," 72000"); 
gnt.addColorStop(0.3, "feee"); 
gnt.addColorStop( 1," fff"); 
/开始 绘制 实体 圆 路 径 
cxt.beginPath(); 
cxt.arc(125,95,80,0,Math.PI*2,true); 
cxt.closePath(); 
/设置 填充 背景 
cxt.fillStyle=gnt; 
// 进 行 填充 
ext.fill(); 
/开始 绘制 边框 
cxt.beginPath(); 
cxt.arc(125,95,80,0,Math.PI*2,true); 
cxt.closePath(); 
/设置 边框 颜色 
cxt.strokeStyle="#666"; 


路 径 


En 
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/设置 边框 宽度 
cxt.lineWidth-2; 
/开始 描 边 


cxt.stroke(); 


j 
执行 后 的 效果 如 图 6-9 所 示 。 — EE 


6.3.9 移动、 缩放 和 旋转 网 页 中 的 正方 形 

在 使 用 务 布 元 素 <canvas> 绘 制图 形 时 ， 有 时 需要 对 已 
绘制 完成 的 图 形 进行 移动 、 缩 放 和 旋转 等 操作 ， 这 些 操作 
可 以 借助 Canvas API 中 提供 的 方法 来 实现 。 通 过 调用 
Canvas API 中 提供 的 方法 , 可 以 将 多 个 图 形 以 不 同 的 方式 | : 
结合 在 一 起 展示 ,还 可 以 通过 增加 阴影 属性 值 为 图 形 添加 O w | 
不 同方 向 的 阴影 效果 。 图 6-9 执行 效果 

下 面 通过 一 个 实例 讲解 移动 、 缩 放 和 旋转 网 页 中 的 正方 形 的 方法 。 


实例 6-10 说 明 
源码 路 径 daima\6\10.html 
功能 移动 、 缩 放 和 旋转 网 页 中 的 圆 形 


在 本 实例 中 新 建 了 一 个 <canvas> 元 素 ， 当 页 面 被 加 载 时 在 画布 中 绘制 一 个 正方 形 。 并 创 
建 三 个 <span> 标 记 ， 将 内 容 分 别 设置 为 “移动 和“ 缩放” 人“ 旋转” 当 单 击 某 个 <span> 标 记 时 
对 画布 中 已 绘制 的 正方 形 进行 相应 的 操作 。 实 例文 件 10.html 的 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title> 移 动 、 缩 放 、 旋 转 绘制 的 图 形 </title> 

<link href="css.css" rel="stylesheet" type="text/css"> 


<script type="text/javascript" language="jscript" 


sre="js10.js"> 
</script> 
</head> 
<body onLoad="drawRect();"> 
<div><p> 
«span onClick="spn1_click();"> 移 动 </span> 
«span onClick="spn2_click0;">4# </span> 
«span onClick="spn3_click(;"> 旋 转 </span></p> 
«canvas id="cnvMain" width="280px" height="190px"></canvas> 
<div> 
</body> 
</html> 
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脚本 文件 js10.js 的 实现 代码 如 下 。 


function $$(id) í 
return document.getElementByld(1d); 
} 
/绘制 一 个 正方 形 
function drawRect() í 
var cnv=$$("cnvMain"); 
var cxt-cnv.getContext("2d"); 
/设置 边框 
cxt.strokeStyle="#666"; 
cxt.lineWidth-2; 
cxt.strokeRect(105,70,60,60); 


j 
/上 下 移动 已 绘制 的 正方 形 
function spnl_click() í 

var cnv=$$("cnvMain"); 


var cxt-cnv.getContext("2d"); 

cxt.translate(-20, —20); 
drawRect(); 
cxt.translate(40,40); 
drawRect(); 

} 

/缩放 已 绘制 的 正方 形 

function spn2_click() í 

var cnv=$$("cnvMain"); 


var cxt-cnv.getContext("2d"); 

cxt.scale(1.2,1.2); 
drawRect(); 
cxt.scale(1.2,1.2); 
drawRect(); 

j 

/旋转 已 绘制 的 正方 形 

function spn3_click() í 

var cnv=$$("cnvMain"); 


var cxt-cnv.getContext("2d"); 
cxt.rotate(Math.PI/8); 
drawRect(); 
cxt.rotate(-Math.PI/4); 
drawRect(); 
j 


后 的 效果 如 图 6-10 所 示 。 
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图 6-10 ”执行 效果 


6.3.10 ”使 用 组 合 的 方式 显示 图 形 


如 果 在 画布 中 绘制 有 多 个 交叉 点 的 图 形 ， 则 需要 根据 绘制 时 的 先后 顺序 显示 每 个 图 形 ， 


在 交叉 处 新 绘制 的 图 形 会 覆盖 原 有 图 形 。 如 果 想 要 改变 这 种 默认 多 图 组 合 的 显示 形式 ， 可 以 


值 。 


口 


DOODO 


D D UD 


darker: 两 种 图 形 都 显示 ， 在 


作 透 明 处 理 。 


牙 改 上 下 文 环境 对 象 的 “globalCompositeOperation” 属 性 值 来 实现 ， 此 属性 有 多 个 属性 
具体 说 明 如 下 。 
O source-over: 显示 图 形 时 ， 新 
口 copy: 只 显示 新 图 形 ， 其 他 部 分 作 透 明 处 理 。 


绘制 的 图 形 履 盖 原 先 绘制 的 图 形 ， 这 是 默认 值 。 


图 形 重 闭 部 分 ， 颜 色 由 两 个 图 形 的 颜色 值 相 减 后 形成 。 


口 destination-atop: 只 显示 新 图 形 中 与 原 图 形 重 闭 部 分 及 新 图 形 的 其 余部 分 ， 其 他 部 分 


destination-in: 只 显示 原 图 形 中 与 新 图 形 重 益 部 分 ， 其 他 部 分 作 透 明 处 理 。 


destination-out: 只 显示 原 图 形 中 与 新 图 形 不 重 登 部 分 ， 其 他 部 分 作 透 明 处 理 。 
destination-over: 与 “Source-over” 属 性 相反 ， 原 先 绘 和 
lighter: 两 种 图 形 都 显示 ， 在 
形 中 与 新 图 形 重 有 登 部 分 及 原 图 形 的 其 余部 分 ， 其 他 部 分 作 透 


口 


source-atop: 只 显示 原 图 


明 处 理 。 


source-m: H Wr FUE H 


source-out: 只 显示 新 
xor: 两 种 图 形 都 绘 
其 中 ,“source” 表 示 新 


下 而 将 通过 一 个 实例 


与 原 图 形 重 登 部 分 ， 其 他 部 分 作 透 明 处 理 。 
图 形 中 与 原 图 形 不 重 欠 部 分 ， 其 他 部 分 作 透 明 处 理 。 
央 ， 并 透明 处 理 图 形 重 登 部 分 。 

图 形 资 源 , “destination” RIR IRRE AY. 
解 在 网 页 中 使 用 组 合 的 方式 显示 图 形 的 方法 。 


的 图 形 将 覆盖 新 绘制 的 图 形 。 
图 形 重 全 部 分 ， 颜 色 由 两 个 图 形 的 颜色 值 相 加 后 形成 。 


=. 


实例 6-11 说 gj 
源码 路 径 daima\6\11.html 
功能 在 网 页 中 使 用 组 合 的 方式 显示 图 形 


在 本 实例 的 页 面 中 新 建 了 一 个 <canvas> 元 素 ， 当 页 面 被 加 载 时 调用 自 定义 的 函数 
pageload()， 通 过 该 函数 创建 一 个 正方 形 和 圆 形 ， 将 两 个 图 形 组 合 后 的 “globalComposite 
Operation” 的 属性 值 设 为 “lighter”， 并 将 组 合 后 的 图 形 结果 显示 在 画布 中 。 实 例文 件 11.html 
的 代码 如 下 。 
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<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title> 设 置 多 图 形 组 合 显 示 的 方式 </title> 


<link href-"css.css" rel="stylesheet" type="text/css"> 


<script type="text/javascript" language="jscript" 
sre="js11.js"> 

</script> 

</head> 

<body onLoad="pageload();"> 


«canvas id-"cnvMain" width="280px" height="190px"></canvas> 


</body> 
</html> 


该 事件 ， 


(1) 通过 ID 号 获取 画布 元 素 <canvas>， 并 根据 
(2) 传递 “cxt” 对 象 ， 调 用 函数 drawRect0 在 画布 : 


调用 另 一 个 自 定义 函数 pageload0。 此 函数 的 运作 流程 如 下 : 


H 


ZH 


画布 元 素 取得 上 下 文 环境 对 象 “cxt”。 
和 给 制 一 个 正方 形 。 


编写 脚本 文件 js11.js， 首 先 目 定义 了 两 个 函数 drawRect() 与 drawCirc0， 分 别 用 于 根据 设 


置 的 上 下 文 环境 参数 值 ， 绘 制 正方 形 与 圆 形 。 当 加 载 页 面 时 触发 页 面 的 “onLoad” 事 件 ， 在 


(3) 设置 “globaICompositeOperation” 属 性 值 为 “lighter”， 表 明 与 下 面 图 形 组 合 时 的 显 


未 方式 。 


(4) 调用 函数 drawCirc0 在 画布 中 绘制 一 个 圆 形 ， 两 个 图 
“globalCompositeOperation” 属 性 值 进行 组 合 显示 。 
文件 jsl1js 的 代码 如 下 。 
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// JavaScript Document 
function $$(id) í 
return document.getElementById(id); 
j 
function pageload() í 
var cnv-$$("cnvMain"); 
var cxt-cnv.getContext("2d"); 


drawRect(cxt); 
cxt.global CompositeOperation-" lighter"; 
drawCirc(ext); 

j 

/绘制 一 个 正方 形 

function drawRect(cxt){ 
cxt.fillStyle="#666"; 
cxt.fillRect(60,50,80,80); 

} 

/绘制 一 个 圆 形 

function drawCirc(cxt)í 
cxt.beginPath() 


cxt.arc(130,120,50,0,Math.PT*2,true); 
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cxt.closePath() 
cxt.fillStyle="#ccc"; 
ext.fill(); 

} 


执行 后 的 效果 如 图 6-11 所 示 。 HMM | 


在 画布 中 不 但 可 以 对 绘制 的 图 像 进行 缩放 绘制 ， 还 可 以 | 
通过 调用 上 下 文 环 境 对 象 中 的 createPattern() 方 法 关联 图 像 元 | 
素 。 选 择 平 铺 方式 创建 一 个 平 铺 的 对 象 ， 并 将 该 平 铺 对 象 赋 | | 
值 给 “fillstyle” 属 性 。 通 过 调用 方法 flIRect0 将 该 平 铺 对 象 RM 
绘制 在 画布 中 , 从 而 实现 平 铺 图 像 的 效果 。 使 用 create Pattern() 图 6-11 执行 效果 
方法 的 格式 如 下 : 


cxt.createPattern (image,type) 


其 中 ,“cxt” 为 上 下 文 环境 对 象 名 称 ， 参 数 “image ”表示 被 平 铺 的 图 像 ， 参 数 “type” 
表示 图 像 平 铺 的 方式 ， 该 参数 有 4 种 取 值 ， 具 体 说 明 如 下 。 

O no-repeat: 不 平 铺 绘制 的 图 像 。 

口 repeat-x: 按 水 平方 向 横向 平 铺 所 绘制 的 网 像 。 

O repeat-y: 按 重 直方 向 纵向 平 铺 所 绘制 的 图 像 。 

口 repeat: 全 方位 平 铺 所 绘制 的 图 像 。 

下 面 将 通过 一 个 实例 讲解 在 页 面 中 使 用 不 同方 式 平 铺 指定 的 图 像 的 方法 。 


6311 “使 用 不 同 的 方式 平 铺 指定 的 图 像 | F 


= 


= 


实例 6-12 说 HJ 
源码 路 径 daima\6\12.html 
功能 在 页 面 中 使 用 不 同 的 方式 平 铺 指定 的 图 像 


在 本 实例 的 页 面 中 新 建 了 一 个 <canvas> 元 素 ， 每 次 单 击 画布 元 素 时 都 调用 不 同 的 平 铺 方 
式 ， 将 图 像 绘制 显示 在 画布 元 素 中 。 实 例文 件 12.html 的 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title> 在 画布 中 平 铺 图 像 </title> 

<link href-"css.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" language="jscript" 


src="Js12.Js"/> 
</script> 
</head> 
<body> 
«canvas id-"cnvMain" width-"280px" height="190px" 
onClick-"envcelick(this);" 
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</canvas> 
</body> 
</html> 


编写 脚本 文件 js12js， 首 先 根据 单 击 画 布 的 累加 总 量 “intNum” 的 值 获取 图 像 在 画布 ， 
的 平 铺 方式 ， 并 保存 至 变量 “str PmType” 中 。 使 用 方法 clearRect0) 清 空 每 次 在 画布 中 绘制 的 
图 形 ， 并 定义 一 个 “Image” 对 象 ， 设 置 该 对 象 加 载 图 像 的 路 径 ; — n 
量 “str PmType” 的 值 新 建 个 于 铺 对 象 。 在 加 载 图 像 的 “onload” 事 件 中 ， 将 “pm” 平 铺 对 
SMAR “fillStyle” 属 性 ， 通 过 fillRect0 方 法 将 平 铺 对 象 绘制 在 整个 画布 中 ，“ Sus "Tu 
“cnv.height” 值 分 别 为 画 宽 与 高 。 文 件 js12.js 的 代码 如 下 。 


* Bh 


// JavaScript Document 
/定义 保存 点 击 次 数 的 全 局 变量 
var intNum = 0; 
/ 自 定义 画布 点 击 函 数 
function cnvclick(cnv) í 
intNum += 1; 
intNum = (intNum == 5)? 1 : intNum; 
var strPrnType = ""; 
switch (intNum) T 


case 1: 


strPrnType = "no-repeat"; 
break; 
case 2: 
strPrnType = "repeat-x" 
break; 
case 3: 
strPrnType = "repeat-y"; 
break; 
case 4: 
strPrnType = "repeat"; 
break; 
j 
var cxt = cnv.getContext("2d"); 
cxt.clearRect(0, 0, cnv.width, cnv.height); 
var objImg = new Image(); 
objImg.src = "1.jpg"; 
var prn = cxt.createPattern(objImg, strPrnType); 
objImg.onload = function() í 
cxt.fillStyle = prn; 
cxt.fillRect(0, 0, cnv.width, cnv.height); 


j 
执行 后 的 效果 如 图 6-12 所 示 。 
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6.3.12 


图 6-12 执行 效果 


切割 指定 的 图 像 


的 方法 


其 


通过 <canvas> 不 仅 能 够 以 各 种 平 铺 的 方式 绘制 图 像 ， 而 且 还 可 以 


clip0 切 割 画布 中 绘制 的 图 像 。clip( 方 法 的 调用 格式 如 下 : 


cxt.clip() 


下 面 通过 一 个 实例 讲解 在 页 面 中 切割 指定 的 图 像 的 方法 。 
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通过 调用 上 下 文 对 象 中 


中 ,“cxt” 表 示 上 下 文 环境 对 象 名 称 ， 该 方法 是 一 个 无 参数 方法 ， 用 于 切割 使 用 路 径 
方式 在 画布 中 绘制 的 区 域 。 因 此 在 使 用 该 方法 前 ， 必 须 使 用 路 径 的 方式 在 画布 中 绘 入 
域 ， 才 能 通过 调用 clip0 方 法 对 该 区 域 进行 切割 。 


= 


一 个 区 


实例 6-13 说 — HJ 
源码 路 径 daima\6\13.html 
功能 在 页 面 中 切割 指定 的 图 像 


实例 文件 13.html 的 代码 如 下 。 


Eu 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title> 切 割 画布 中 的 图 像 </title> 

<link href-"css.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" language="jscript" 


sre="js13.js"/> 
</script> 
</head> 
<body onLoad="pageload();"> 
<canvas id="cnvMain" width="280px" height="190px"></canvas> 
</body> 
</html> 


写 脚 本 文件 js13.js， 设 置 当 加 载 页 面 时 会 触发 “onLoad” 事 件 


T 


， 在 该 事件 中 调用 了 自 
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定义 的 函数 pageload0， 此 函数 的 运作 流程 如 下 ; 

(1) 创建 一 个 “Image” 对 象 ， 并 设置 该 对 象 加 载 图 像 的 路 径 。 在 加 载 图 像 过 程 中 ， 
次 调用 另外 一 个 自 定 义 函 数 drawCirc0， 绘 制 一 个 圆 形 路 径 ， 并 使 用 stroke(0 方 法 将 路 径 绘 制 
在 画布 中 。 

(2) 调用 方法 clip0 将 画布 中 的 圆 形 路 径 进 行 切 制 。 其 中 在 调用 函数 drawCircO0 时 ， 参 数 
“cxt” 表 示 上 下 文 环境 对 象 名 称 ,“in 妇 ”表示 圆 半 径 ,“blnC” 表 示 是 否 需 要 对 绘制 图 形 进行 
WW], "true" KRAH, "false" opi. 
(3) 使 用 drawImage0 方 法 在 画布 中 绘制 一 个 左上 角 坐 标 为 (70，3) 的 图 像 。 因 为 绘制 图 像 
前 画布 已 按照 圆 形 路 径 进行 了 切 制 ， 所 以 加 载 的 图 像 也 按照 该 切割 后 的 圆 形 区 域 进行 绘制 。 

(4) 第 二 次 调用 自 定 义 函 数 drawCirc0， 绘 制 一 个 与 第 一 个 圆 路 径 同 圆心 不 同 半径 的 小 圆 
形 ， 并 设置 “fillStyle” 的 属性 值 为 “#fff”， 通 过 fill0) 方 法 进行 填充 ， 形 成 大 圆 套 小 圆 的 效果 。 
文件 js13jjs 的 代码 如 下 。 

function $$(id) í 
return document.getElementById(id); 


j 
// 自 定义 页 面 加 载 时 调用 的 函数 
function pageload() { 


var cnv = $$("cnvMain"); 
var cxt = cnv.getContext("2d"); 
var objImg = new Image(); 
objImg.src = "1.jpg"; 
objImg.onload = function() í 
drawCirc(ext, 60, true); 
ext.drawImage(objImg, 70, 3); 
drawCirc(ext, 10, false); 
j 
j 
/根据 相关 参数 绘制 
function drawCirc(cxt intR, blnC) í 
cxt.beginPath(); 
cxt.arc(140, 95, intR, 0, Math.PI * 2, true); 
cxt.closePath(); 
/设置 边框 颜色 
cxt.strokeStyle = "#666"; 
/设置 边框 宽度 
cxt.lineWidth = 3; 
FARMA 
cxt.stroke(); 
if (bInC) í 
/切割 图 形 
ext.clip(); 
) else í 
/设置 填充 色 
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cxt.fillStyle = "Zfff'; 
/填充 图 形 
cxt.fill(); 

j 


执行 后 的 效果 如 图 6-13 所 示 。 


图 6-13 ”执行 效果 


6.3.13 ”绘制 文字 


fr HTML 5 网 页 中 ， 想 要 在 画布 中 绘制 文字 ， 可 以 通过 调用 上 下 文 环境 对 象 的 fillText() 
方法 与 strokeText() 方 法 来 实现 ， 前 者 用 于 在 画布 中 以 填充 的 方式 绘制 文字 ， 后 者 用 于 在 画布 
中 以 描 边 的 方式 绘制 文字 。 
下 面 通过 一 个 实例 讲解 在 网 页 中 绘制 文字 的 方法 。 


实例 6-14 说 H 
源码 路 径 daima\6\14.html 
功能 在 网 页 中 绘制 文字 


在 本 实例 的 页 面 中 新 建 了 一 个 <canvas> 元 素 ， 当 页 面 被 加 载 时 设置 了 三 种 不 同 字体 的 文 
字 ， 分 别 绘制 在 画布 元 素 中 的 不 同 坐 标 位 置 上 。 实 例文 件 14.html 的 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title> 绘 制 文字 </title> 

<link href-"css.css" rel="stylesheet" type="text/css"> 


CB 


«script type-"text/javascript" language-"jscript" 


= 


src-"js14.js"/— 
</script> 
</head> 
<body onLoad="pageload();"> 
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«canvas id="cnvMain" width="280px" height="190px"></canvas> 


</body> 
</html> 


脚本 文件 js14.js 的 代码 如 下 。 


// JavaScript Document 
function $$(id) í 


j 


return document.getElementById(id); 


// 自 定义 页 面 加 载 时 调用 的 函数 
function pageload() { 


} 


var cnv = $$("cnvMain"); 

var cxt = cnv.getContext("2d"); 

drawText(cxt, "bold 35px impact", 90, 70, false); 
drawText(cxt, "bold 35px arial blank", 130, 110, true); 
drawText(cxt, "bold 35px comic sans ms", 170, 150, true); 


/根据 参数 绘制 不 同类 型 的 字体 
function drawText(cxt, strFont, intX, intY, blnFill) í 


j 


cxt.font — strFont; 
cxt.textAlign = "center"; 
cxt.textBaseline = "bottom"; 
if (bInFill) í 
cxt.fillStyle = "ccc"; 
cxt.fill Text("HTML 5 ", intX, intY); 
} else í 
cxt.strokeStyle = "#666"; 
cxt.strokeText("^* >J HTML 5 ", intX, intY); 


在 上 述 代码 中 自 定 义 了 一 个 用 于 加 载 页 面 时 的 函数 pageload() JE ER 2302) 9] — UC T A 


外 一 个 用 于 绘制 文字 的 函数 drawTextO. K% pageload0 有 如 下 5 个 参数 : 
O 参数 cxt: 表示 上 下 文 环境 对 象 名 称 。 


Ü C LD 


参数 strFont: 表示 设置 的 “font” 属 性 值 。 
参数 intX: 表示 文字 在 画布 左上 角 的 横 坐 标 。 
参数 intY: 表示 文字 在 画布 左上 角 的 纵 坐 标 。 
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参数 blnFill: 表示 是 否 采 用 f10 方 法 绘制 字符 ， 如 果 为 “true” 表 示 是 ， 否 则 表示 使 


用 stroke0 方 法 绘制 文字 。 


第 一 次 调用 函数 pageload0 时 使 用 了 “Impact” 字 体 ， 在 画布 左上 角 坐 标 (90，70) 处 ， 使 


用 stroke0 方 法 绘制 了 内 容 为 “学 习 HTML 5” 的 文字 。 当 第 二 次 调用 时 , 使 用 了 “Arial Blank” 


字体 ， 在 画布 左上 角 坐 标 (130，110) 处 ， 采 用 f10 方 法 绘制 了 内 容 为 “HTML 5” 的 文字 。 第 


三 次 调用 与 第 二 次 调用 基本 相同 ， 仅 是 字体 名 称 与 在 画布 中 的 坐标 不 同 。 执 行 后 的 效果 如 


图 6-14 所 示 。 
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图 6-14 执行 效果 


6.3.14 ”制作 一 个 简单 的 动画 


在 HTML 5 中 ,使 用 画布 元 素 <canvas> 还 可 以 制作 一 些 简 单 的 动画 。 上 其 体 的 制作 过 程 主 
要 分 为 如 下 两 个 步 又: 

(OD 自 定 义 一 个 函数 ， 用 于 图 形 的 移动 或 其 他 动作 。 

(2) 使 用 setInterval0 方 法 设置 动画 执行 的 间隔 时 间 ， 反 复 执 行 自 定义 函数 。 

下 面 通过 一 个 实例 讲解 在 网 页 中 实现 一 个 简单 的 动画 效果 的 方法 。 


实例 6-15 说 HJ 
源码 路 径 daima\6\15.html 
功能 在 网 页 中 实现 一 个 简单 的 动画 效果 


在 本 实例 的 页 面 中 新 建 了 一 个 <canvas> 元 素 ， 在 该 画布 元 素 中 绘制 了 一 个 卡通 笑脸 。 当 
加 载 页 面 时 ， 该 笑脸 从 画布 的 左边 慢 慢 移 至 右边 ， 又 从 右边 移动 至 左边 ， 最 后 停止 在 起 始 位 
置 。 实 例文 件 15.html 的 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title> 绘 制 简单 的 动画 </title> 

<link href-"css7.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" language="jscript" 


src="Js15.Js"/> 
</script> 
</head> 
<body onLoad="pageload();"> 
<canvas id="cnvMain" width="280px" height="190px"></canvas> 
</body> 
</html> 
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脚本 文件 js15.js 的 代码 如 下 。 


// JavaScript Document 
function $$(id) í 
return document.getElementByld(1d); 
J 
var intl, intJ, intX; 
// 自 定义 页 面 加 载 函 数 
function pageload() { 


var cny = $$("cnv Main"); 
var cxt = cnv.getContext("2d"); 
drawFace(cxt); 
intI = 1; 
intJ = 21; 
setInterval(moveFace, 100); 

} 

// 调 用 自 定义 函数 绘制 脸 部 形状 

function drawFace(cxt) { 
drawCirc(cxt, "#666", 30, 80, 30, 2, true); 
drawCirc(cxt, "#fff", 20, 70, 5, 2, true); 
drawCirc(ext, "#fff", 40, 70, 5, 2, true); 
drawCirc(ext, "#fff", 30, 80, 18, 1, false); 


j 
/根据 参数 绘制 各 类 圆 形 
function drawCirc(cxt strColor, intX, intY, intR, intH, blnFill) í 
cxt.beginPath(); 
cxt.arc(intX, intY, intR, 0, Math.PI * intH, blnFill); 
if (bInFill) í 
cxt.fillStyle = strColor; 
ext.fill(); 
) else í 
cxt.lineWidth — 2; 
cxt.strokeStyle = strColor; 
cxt.stroke(); 


j 


cxt.closePath(); 
j 
/实现 往返 移动 圆 形 脸 部 的 功能 
function moveFace() í 


var cnv = $$("cnvMain"); 

var cxt = cnv.getContext("2d"); 
cxt.clearRect(0, 0, 280, 190); 
if (intl < 20) í 


intI += 1; 
intX — intl; 
) else í 


if (intJ > 0) í 
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intJ — 1; 
intX = -intJ; 
j 
} 
cxt.translate(intX, 0); 
drawFace(cxt); 


j 


在 上 述 代 码 中 定义 了 4 个 自 定义 函数 。 其 中 函数 pageload0 用 于 加 载 页 面 时 调用 ;函数 
drawFaceO 用 于 根据 上 下 文 环境 对 象 在 画布 中 绘制 卡通 笑脸 ; 函数 drawCirc0 用 于 根据 传递 的 
参数 值 , 使 用 A105 stroke0 方 法 绘制 指定 位 置 、 填 充 色 、 半 径 、 弧度 的 圆 形 ; 函数 moveFace() 
用 于 实现 往返 移动 笑脸 的 功能 。 

在 函数 drawFace() 中 ， 调 用 了 4 次 drawCirc0 孙 数 ， 分 别 绘制 卡通 笑脸 的 头 形 、 两 只 眼睛 
Hl: 在 moveFace0 函 数 中 ， 先 根据 自 增 量 “int[” 的 值 ， 使 用 translate0 方 法 向 右 移动 卡通 笑 
脸 。 当 “intI” 值 大 于 20 时 ， 转 为 获取 “intJ” 值 ， 根 据 自 减 量 “inU” 的 值 ， 使 用 translate() 
方法 向 左 移 动 卡通 笑脸 ， 直 到 “intJ” 值 小 于 0， 便 停 止 移动 。 在 自 定义 函数 pageload0 中 , 通 
过 setInterval0 方 法 ， 按 时 反复 执行 函数 moveFace0， 最 终 在 画布 中 实现 简单 的 动画 效果 。 执 
行 后 的 效果 如 图 6-15 所 示 。 
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图 6-15 ”执行 效果 
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ZA HTML 4 中 ， 有 两 种 数据 存储 的 方式 : cookie 存储 和 session 存储 ， 这 两 种 存储 都 有 时 
间 和 大 小 的 限制 ， 例 如 大 多 数 浏览 器 对 cookie 的 限制 最 多 不 能 超过 4096 个 字 节 (KB), 3 


技术 提高 高 


数据 存储 应 用 详解 


且 cookie 的 数量 总 共 不 能 超过 300 个 ， 这 些 限 制 无 法 满足 现实 中 站 点 的 需求 。 为 了 解决 这 个 
问题 ， 在 HTML 5 中 新 增加 了 三 种 数据 存储 方式 ， 分 别 是 本 地 数据 存储 、session 存储 和 离线 


存储 。 本 章 将 详细 介绍 这 三 种 数据 存储 的 基本 知识 ， 


14 Web 存储 


无 论 是 处 理 多 媒体 文件 和 还 
令 我 们 震撼 的 是 数据 存储 功能 。 
的 数据 库 工具 。 


7.1.1 什么 是 Web 存储 


使 用 HTML 5 技术 可 以 在 客户 端 存储 数据 ， 在 HTML 5 中 提供 


数据 的 新 方法 。 


口 localStorage: 没有 时 间 限 制 


是 绘制 图 形 图 像 ， 这 些 都 不 是 HTML 5 震撼 性 的 功能 ， 真 正 


使 月 


并 通过 几 个 具体 实例 来 演示 其 流程 。 


H HTML 5， 可 以 将 数据 存放 在 客户 端 ， 而 无 需 使 用 专业 


的 数据 存储 。 


口 sessionStorage: 针对 一 个 Session 的 数据 存储 。 
在 这 以 前 ， 客 户 端的 存储 功能 都 是 通过 Cookie 来 完成 的 。 但 是 因为 它们 是 由 每 个 对 服务 
器 的 请 求 来 传递 的 ， 所 以 Cookie 不 适合 大 量 数据 的 存储 ， 这 使 得 Cookie 速度 很 慢 ， 而 且 效 


率 也 不 高 。 


了 如 下 7 


丙种 在 客户 端 存储 


在 HTML 5 中 ， 数 据 不 是 由 每 个 服务 器 请 求 传递 的 ， 而 是 只 有 在 请 求 时 使 用 数据 ， 这 样 


同 的 区 域 ， 并 且 一 个 网 站 只 能 访问 其 自身 的 数据 。 
在 HIML 5 中 可 以 使 用 JavaScript 来 存储 和 访问 数据 。 


7.1.2 Web 存储 的 影响 


Cookie 的 出 现 大 大 地 推动 了 Web 的 发 展 ， 虽 然 它 既 有 优点 也 有 


使 在 不 影响 网 站 性 能 的 情况 下 存储 大 量 数据 成 为 可 能 。 对 于 不 同 的 网 站 来 说 ， 数 据 存 储 于 不 


定 的 缺陷 , 但 是 功 大 于 


过 。Cookie 的 优点 是 允许 我 们 在 登陆 网 站 时 ， 记 住 我 们 输入 的 用 户 名 和 密码 ， 这 样 在 下 一 次 
登陆 时 就 不 需要 再 次 输入 了 ， 可 以 达到 自动 登陆 的 效果 。 


但 是 另 一 方面 ，Cookie 的 安全 问题 也 日 趋 


as 
ç 


ñi, 


容易 受到 黑客 的 窃取 ， 安 全 机 人 


受到 关注 ， 比 如 Cookie 由 于 存储 在 客户 端 浏 览 
剖 不 是 十 分 好 。 还 有 另外 一 个 问题 ，Cookie 存储 数据 


的 能 力 有 限 。 目 前 在 很 多 浏览 器 中 规定 每 1 
Cookie 的 内 容 超 过 4KB ， 唯 一 的 方法 是 如 
请 求 中 都 必须 附带 Cookie， 

使 用 HTML 5 中 新 增加 的 Web 存储 机 制 ， 
两 方面 作 了 加 强 。 
CD 对 于 Web 开发 者 来 说 ， 它 提 人 
(2) 在 存储 的 容量 


中 规定 每 个 Cookie 只 能 存储 不 
法 是 重新 创建 。 
这 将 有 可 能 增加 网 络 的 负载 


可 以 弥补 cookie I 
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\ 超 过 4KB 的 限制 ， 所 以 一 日 
此 外 ，Cookie 的 一 个 缺 


名 是 每 次 的 HTTP 


缺点 ，Web 存储 机 人 制 在 以 下 


域 下 存储 5—10MB 的 内 容 。 这 就 意味 
储 用 户 的 设置 偏好 、 本 地 化 的 数据 


yE 


Ib 


前 要 在 服务 端 才能 完 


用 元 


供 了 很 容易 使 用 的 API 接 
的 容量 方面 ， 可 以 根据 用 户 分 配 的 磁 查 下 


渚 ， 这 就 可 以 在 每 个 用 户 
味 者 ， 用 户 不 仅仅 可 以 存储 Session， 还 可 以 在 
、 离 线 的 数据 ， 这 对 提高 效率 是 很 有 者 
Web 存储 提供 了 使 用 JavaScript 编程 的 接口 ， 这 将 使 得 开发 者 可 以 使 
崩 做 很 多 以 前 


， 通 过 设置 键 值 对 即 可 使 
盘 配 额 进 行 存 


He 


E 客 户 端 存 


帮助 的 。 


1.2 HIMI 5 中 的 两 种 存储 方法 


在 HTML 5 中 ， 主 要 有 两 种 数据 存储 的 方式 
sessionStorage 来 实现 。 本 节 将 详细 计 


成 的 工作 。 现 在 各 个 主流 浏览 


， 分 别 是 人 


H JavaScript， 在 客 
已 经 开始 文 持 Web 存储 。 


7.2.1 ”使 用 localStorage 方法 


当 使 用 localStorage 方法 存储 数据 时 是 没有 任何 时 间 限 制 


甚至 是 下 一 年 之 后 仍然 使 用 存储 的 数据 。 下 面 ; 
方法 。 


使 用 方法 localStorage 和 使 用 方 
F 解 这 两 种 存储 方式 的 使 


H 7 法 
用 方法 。 


I 的 ,例如 可 以 在 第 二 天 、 第 二 周 


一 个 实例 讲解 显示 访问 页 面 的 统计 次 数 的 
实例 7-1 说 — UJ 
源码 路 径 daima\7\1.html 
功能 显示 访问 页 面 的 统计 次 数 
文件 


<!DOCTYPE HTML> 
<html> 


<body> 


«script type="text/javascript"> 


if (localStorage.pagecount) 


1 


localStorage.pagecount-Number(localStorage.pagecount) +1 
} 
else 


localStorage.pagecount=1; 


本 实例 的 功能 是 统计 访问 页 面 的 次 数 ， 每 刷新 一 次 页 面 ， 访 问 次 数 就 会 增加 1 次 。 实 例 
F 1.html 的 主要 实现 代码 如 下 
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} 


document.write(" Visits: " + localStorage.pagecount + " time(s)."); 


</script> 


<p> 刷 新 页 面 会 看 到 计数 器 在 增长 。</p> 


<p> 请 关闭 浏览 器 窗口 ， 然 后 再 试 一 次 ， 计 数 器 会 继续 计数 。</p> 


</body> 
</html> 


执行 效果 如 图 7-1 所 示 。 


Visits: 7 time(s). 


: M 刷新 页 面 会 看 到 计数 器 在 增长 。 

7.2.2 使 用 sessionStorage 方法 请 关闭 浏览 器 窗口 ， 然 后 再 试 一 次 ， 计 数 器 会 继续 计数 。 
方法 sessionStorage 比较 “体贴 ” 可 以 针对 具体 茶 p 

一 个 Session 进行 数据 存储 ， 当 用 户 关 闭 浏 览 器 窗口 后 图 7-1 执行 效果 


数据 会 删除 。 例 如 在 下 面 的 代码 中 演示 了 创建 并 访问 一 个 sessionStorage 的 过 程 。 


<!DOCTYPE HTML> 

<html> 

<body> 

«script type="text/javascript"> 
sessionStorage.lastname-" Smith"; 
document.write(sessionStorage.lastname); 
</script> 

</body> 

</html> 


下 面 通过 一 个 实例 讲解 显示 访问 页 面 的 统计 次 数 的 方法 。 


实例 7-2 说 明 
源码 路 径 daima\7\2.html 
功能 显示 访问 页 面 的 统计 次 数 


本 实例 的 功能 是 统计 访问 此 页 面 的 次 数 ， 每 刷新 一 次 页 面 ， 
例文 件 2.html 的 主要 代码 如 下 。 


<!DOCTYPE HTML> 
<html> 
<body> 


«script type="text/javascript"> 


1f (sessionStorage.pagecount) 


1 
142 NH 


访问 次 数 就 会 增加 1 次 。 


oy kn 


头 
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sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; 
else 
sessionStorage.pagecount=1; 
j 


document. write(" Visits " + sessionStorage.pagecount + " time(s) this session."); 


</script> 


<p> 刷 新 页 面 会 看 到 计数 器 在 增长 。</p> 


<p> 请 关闭 浏览 器 窗口 ， 然 后 再 试 一 次 ， 计 数 器 已 经 重 置 了 。</p> 


</body> 
</html> 


执行 效果 如 图 7-2 所 示 。 
Visits 3 time(s) this session. 
注意 : 本 实例 的 统计 和 上 一 个 实例 的 有 一 点 区 别 ， — BERE GEHE. 
本 实例 当 关闭 浏览 器 后 再 次 打开 后 ， 此 时 的 统计 数字 将 wWenimamn masa x. VRECGEERT. 


从 1 开始 重新 统计 。 而 上 一 个 实例 是 重新 打开 后 统计 数 图 7-2 执行 效果 
字 是 累加 统计 的 。 


13 ”数据 存储 对 象 


Web Storage 页 面 存储 是 HTML 5 为 数据 存储 在 客户 端 提供 的 一 项 重要 功能 ， 因 为 Web 
Storage API 可 以 区 分 会 话 数据 与 长 期 数据 ， 因 此 相应 的 API 可 以 分 为 如 下 两 种 类 型 : 

口 sessionStorage: 保存 会 话 数据 。 

口 loaclStorage: 在 客户 端 长 期 保存 数据 。 
因为 Web Storage API 可 以 将 客户 端的 数据 按照 类 型 进行 存储 ， 所 以 存储 功能 比 传统 的 、 
单一 的 Cookie 方式 要 优秀 。 


7.3.1 ”使 用 sessionStorage 对 象 


当 在 HTML 5 页 面 中 存储 数据 的 时 候 ， 使 用 sessionStorage 对 象 保存 数据 的 时 间 较 短 ， 因 
为 这 个 数据 实质 上 是 被 保存 在 session 对 象 中 。 当 打开 浏览 器 时 ， 可 以 查看 操作 过 程 中 临时 保 
存 的 数据 。 如 果 关 闭 浏览 器 ， 所 有 用 sessionStorage 对 象 保 存 的 数据 会 全 部 丢失 。 使 用 
sessionStorage 对 象 保 存 数 据 的 方法 非常 简单 ， 只 需要 调用 setltem() 方 法 即 可 ， 具 体 调用 格式 
如 下 : 


sessionStorage. setltem( key, value) 


O 参数 key: 表示 被 保存 内 容 的 键 名 。 
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NH] sessionStorage 对 象 中 getltem( 方 法 ， 有 具体 调用 格式 如 下 : 


sessionStorage.getItem (key) 


其 中 ， 参 数 key 表示 设置 保存 时 被 保存 内 容 的 键 名 ， 该 方法 将 返回 一 个 指定 键 名 对 应 的 


键 值 ， 如 果 不 存 在 则 返回 一 个 null (Ë 


下 面 将 通过 一 个 实例 讲解 使 用 sessionStorage 对 象 保 在 并 读 取 临时 数据 的 方法 。 


T 


O 参数 value: 表示 被 保存 内 容 的 键 值 , 在 使 用 setItem0 方 法 保存 数据 时 , 对 应 格式 为 “ 键 
名 、 键 值 ”。 成 功 设置 键 名 后 不 再 允许 修改 ， 也 不 能 重复 。 如 果 有 重复 的 键 名 ， 则 只 
能 修改 对 应 的 键 值 ， 即 用 新 增 重 复 的 键 名 值 取代 原 有 重复 的 键 名 值 。 


当 使 用 sessionStorage 对 象 中 的 方法 setItem0 保 存 数据 后 ， 如 果 需 要 读 取 被 保存 的 数据 ， 


实例 7-3 说 HJ 
源码 路 径 daima\7\3.html 
功能 使 用 sessionStorage 对 象 保存 并 读 取 临 时 数据 


在 本 实例 中 分 别 创建 了 一 个 文本 框 和 一 个 读 取 按 钮 ， 当 在 文本 框 中 输入 内 容 时 ， 通 过 
sessionStorage 对 象 保存 文本 框 输入 的 内 容 ， 并 即时 显示 在 页 面 中 。 当 单 击 “ 读 取 ” 按 钮 时 会 


直接 读 取 被 保存 的 临时 数据 。 实 例文 件 3.html 的 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title> 使 用 sessionStorage</title> 

<link href-"css.css" rel="stylesheet" type="text/css"> 
«script type-"text/javascript" language-"jscript" 


sre="js3.js"/> 
</script> 
</head> 
<body> 
<fieldset> 


<legend>sessionStorage 对 和 象 保存 与 读 取 临 时 数据 </legend> 


«input name-"txtName" type="text" class="inputtxt" 


onChange-"txtName change(this);" size="30px"> 


«input name-"btnGetValue" type-"button" class 


inputbtn" 


onClick-"btnGetValue click();" value=" 读 取 心 


<p id="pStatus"></p> 
</fieldset> 
</body> 
</html> 


编写 脚本 文件 js3.js， 当 在 文本 框 txtName_change() 


FP 输入 内 容 时 会 触发 onChange 事件 


在 此 调用 了 自 定义 的 函数 fxtName_change0， 此 函数 的 运作 流程 如 下 。 


(1) 通过 变量 strName 获取 传 过 来 的 文本 框 内 容 。 
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(2) 通过 调用 sessionStorage 对 象 中 的 setItem() 方 法 ， 将 该 内 容 值 保存 到 Session 对 象 中 ， 


ES 


3) 完成 保存 后 调 月 


HE 中 键 名 为 “strName”， 对 应 键 值 为 已 获取 内 容 的 变量 strName。 


值 通 


>- 


H sessionStorage 对 象 中 的 getItem() 方 法 ， 根 据 保存 的 键 名 将 对 应 的 键 


ID 号 为 “pStatus” 的 元 素 <p> 显 示 在 页 面 中 。 
XT js3 js 的 代码 如 下 。 


function $$(id) í 
return document.getElementById(id); 


j 


// 输 入 文本 让 


EE AJ EISE H 


目的 函数 


function txtName change(v) í 


var strName = v.value; 


sessionStorage.setItem("strName", strName); 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML = sessionStorage.getItem("strName"); 


} 


1/ 点击“ 读 取 ”按钮 时 调用 的 函数 
function btnGetValue click() { 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML = sessionStorage.getItem("strName"); 


j 


(Q)charset "utf-8"; 


body í 
font-si 


j 


.inputbtn í 


ze:12px 


羊 式 文件 css.css 的 代码 如 下 。 


border:solid 1px #ccc; 


background-color:£eee; 


line-height:18px; 


font-size:12px 

} 

.inputtxt í 
border:solid 1px #ccc; 
line-height:18px; 
font-size:12px; 
padding-left:3px 

J 

fieldset( 
padding: 10px; 
width:285px; 
float:left 

} 
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#pStatus{ 
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display:none; 

border: 1px #ccc solid; 
width:158px; 
background-color:£eee; 
padding:6px 12px 6px 12px; 
margin-left:2px 


j 

.status í 
border: 1px #ccc solid; 
background-color:#eee; 
padding:6px 12px 6px 12px 

j 

ul( 
list-style:none; 
padding:0px; 
margin: 15px 0px 15px 0px; 
text-align:center 

} 

ul .li bot{ 
padding-top: 10px 

} 

ul .li top{ 
padding-bottom: 10px 

j 

[*z; ifl] 4*/ 

#ulMessage í 
width:360px 

j 


#ulMessage .spn af 


j 


width:60px; 
float:left; 
text-align:left 


zulMessage .spn bí 


j 


width:130px; 
text-align:left; 
float:left 


#ulMessage .spn c{ 


} 


width:50px; 
text-align:left; 
float:left 


#ulMessage .spn_dí 


width:80px; 
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text-align:left; 
float:left 

} 

#ulMessage .li hí 
border-bottom:solid 1px #666; 
float:left; 
background-color:#eee; 
padding:5px; 
font-weight:bold 

} 

#ulMessage .li cí 

border-bottom:dashed 1px #ccc; 


float:left; 
padding: 5px 

j 

PH 
clear:both; 
padding-top:10px 

j 

启示 例 5*/ 

p51 
clear:both; 
padding-top: 10px; 
padding-left:3px; 
width:300px 

j 

.spanl( 
float:left 

} 

.Spanr{ 
float:right 

} 

.btn{ 
padding-top: 1 0px; 
clear:both 

j 


执行 后 的 效果 如 图 7-3 Bro, decern AR. GUAPA “1237, rh RC" f 
钮 后 会 在 下 方 显示 存储 的 数据 。 如 图 7-4 所 示 。 


[ 


sessionStorage 对 象 保 存 与 读 职 虱 时 数据 


123 读 取 
sessionstorage 对 象 保存 与 读 职 恪 时 数据 I iS 
| EROR | | 
图 7-3 初始 效果 图 7-4 显示 存储 的 数据 
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7.3.2 ”使 用 


localStorage 对 象 


本 章 7.3.1 节 学 习 了 sessionStorage 对 象 保存 数据 的 方法 。 但 是 使 用 sessionStorage 对 象 只 


能 保存 临时 的 会 


不 建议 使 用 sessionStorage 对 象 , 而 是 应 该 使 用 HTML 5 中 的 新 对 象 localStorage。 
期 保存 在 客户 端 ， 一 直到 人 工 清除 为 止 。 如 果 使 用 localStorage 对 象 保存 数据 内 


可 以 将 数据 长 


2 Œ 
Ti: 需要 通过 


如 下 格式 调用 方法 setltem: 


localStorage. setItem (key,value) 


与 对 象 sessionStorage 保存 数据 的 方法 


setItem() 方 法 ， 
对 象 保存 数据 
式 如 下 : 


参数 说 明 相 同 ，locaIStorage 对 象 也 是 通过 调用 


按照 <“ 键 名 、 键 值 ?的 方式 进行 设置 , 只 是 调用 的 对 象 不 一 样 。 当 使 用 localStorage 


后 ， 可 以 调用 对 象 中 的 getItem() 方 法 读 取 指 定 键 名 所 对 应 的 键 值 ， 


话 数 据 ， 关 闭 浏览 器 后 就 会 于 失 这 些 数据 。 如 果 需 要 长 期 在 客户 端 保存 数据 ， 


通过 此 对 象 


具体 调用 格 


localStorage.getItem (key) 


其 中 ， 
存在 ， 则 返回 一 
xF loca 


具体 调用 格式 


参数 key 表示 需要 读 取 键 值 内 容 的 键 名 ， 与 sessionStorage 对 象 一 样 ， 
个 null 值 。 


如 果 键 名 不 


IStorage 可 以 将 内 容 长 期 保存 在 客户 端 ， 即 使 重新 打开 浏览 器 也 不 会 丢失 。 如 果 
需要 清除 localStorage 对 象 保存 的 内 容 , 需要 调用 localStorage 对 象 的 男 一 个 方法 removeltem()， 


如 下 : 


localStorage.removelItem(key) 


其 中 ， 参 数 key 表示 需要 删除 的 键 名 ， 如 果 删 除 成 功 ， 则 会 删除 所 有 与 键 名 对 应 的 数据 。 
下 面 将 通过 一 个 实例 讲解 保存 并 读 取 登录 用 户 名 和 密码 的 方法 。 
实例 7-4 说 — HJ 
源码 路 径 daima\7\4.html 
功能 保存 并 读 取 登录 用 户 名 和 密码 


在 本 实例 中 新 建 了 一 个 登录 页 面 ， 当 用 户 在 文本 杠 


按钮 后 ， 会 使 


答 入 用 户 名 与 密码 并 单 


击 “登录 ” 


用 localStorage 对 象 保存 登录 时 的 用 户 名 。 如 果 选 中 “保存 密码 ?”” 复 选 枉 ， 则 


保存 登录 时 的 


密码 ， 和 否则 将 清空 原先 保存 的 密码 。 当 重新 在 浏览 器 中 打开 该 页 面 时 ， 将 分 别 


在 相应 的 文本 


框 中 显示 保存 的 用 户 名 和 密码 。 实 例文 件 4.html 的 代码 如 下 。 


<!DOCTYPE html> 
<html> 

<head> 

«meta charset-"utf-8" /> 


<title> 保 存 并 读 取 登 录用 户 名 与 密码 </title> 


<link 


href-"css.css" rel="stylesheet" type="text/css"> 


<script type="text/javascript" language="jscript" 
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</script> 
</head> 
<body onLoad="pageload();"> 
<form id="frmLogin" action="#"> 
<fieldset> 
<legend> 登 录 </legend> 
<ul> 
<li class-"li top" 
«span id="spnStatus"></span> 


</li> 
<] 记 名称: 
«input 1d="txtName" class-"inputtxt" 
type="text"> 
</li> 
<] 记 密码: 


<input 1d="txtPass" class="inputtxt" 
type="password"> 
</li> 
<li> 
<input id="chkSave" type="checkbox"> 
保存 密码 ? 
</li> 
<li class-"li bot" 
«input name-"btnLogin" class-"inputbtn" value=" 登 录 " 
type="button" onClick="btnLogin click();"> 
<input name="rstLogin" class="inputbtn" 
type="reset" value-" BU 
</li> 
</ul> 
</fieldset> 
</form> 
</body> 
</html> 


E 


写 脚 本 文件 js4.js， 设 置 在 加 载 页 面 时 会 调用 自 定 义 的 函数 pageload0， 此 函数 的 运作 
流程 如 下 : 

(1) 通过 localStorage 对 象 中 的 getItem() 方 法 获取 指定 键 名 的 键 值 ， 并 保存 在 变量 中 。 如 
果 不 为 空 ， 则 将 该 变量 值 赋值 于 对 应 的 文本 框 ， 用 户 下 次 登录 时 不 用 再 次 输入 ， 以 方便 操作 。 

(2) 当 用 户 单 击 “ 登 录 ” 按 钮 时 会 触发 onClick 事件 ， 通 过 此 事件 调用 另外 一 个 自 定 义 的 
函数 btnLogin_click()。 该 函数 先 通过 两 个 变量 保存 在 文本 框 中 输出 的 用 户 名 与 密码 ， 然 后 调 
用 localStorage 对 象 中 的 setItem0) 方 法 ， 将 用 户 名 作为 键 名 “keyName” 的 键 值 进行 保存 。 如 
果 选 择 了 “保存 密码 ? ” 复 选 枉 ， 则 将 密码 作为 键 名 “keyPass” 的 键 值 进行 保存 。 否 则 将 调 
用 localStorage 对 象 中 的 removeltem() 方 法 ， 删 除 键 名 为 “keyPass ”的 记录 。 

文件 js4.js 的 具体 代码 如 下 。 
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// JavaScript Document 
function $$(id) í 


j 


return document.getElementBylId(id); 


/页 面 加 载 时 调用 的 函数 
function pageload() í 


j 


var strName = localStorage.getItem("keyName"); 
var strPass = localStorage.getItem("keyPass"); 
if (strName) í 

$$("txtName").value = strName; 


} 
if (strPass) í 


$$("txtPass").value = strPass; 


j 


/点 击 “ 登 录 ” 按 钮 后 调用 的 函数 
function btnLogin click() í 


j 


var strName = $$("txtName").value 
var strPass = $$("txtPass").value; 
localStorage.setItem("keyName", strName); 
if ($S("chkSave").checked) í 
localStorage.setItem("keyPass", strPass); 
) else í 
localStorage.removeltem("keyPass"); 
} 
$$("spnStatus").className = "status"; 
$$("spnStatus").innerHTML = "登录 成 功 ! "; 


执行 后 的 效果 如 图 7-5 所 示 ， 在 文本 框 中 输入 用 户 名 和 密码 ， 然 后 勾 选 “保存 密码 ? ” 
复 选 框 ， 单 击 “ 登 录 ” 按 钮 后 会 显示 登录 成 功 。 如 图 7-6 Pra. 


当 重 新 在 浏览 右 中 打开 该 页 面 时 ， 将 分 别 在 相应 的 文本 框 


登录 == 
登录 成 功 
名 称 : 

名 称 : 123 

密码 ; "ME 
[D REFER? a 
登录 取消 登录 HDH 

图 7-5 初始 效果 图 7-6 登录 成 功 


显示 保存 的 用 户 名 和 密码 。 


如 图 7-7 所 示 。 
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登录 
名 称 : 123 
TH: 
[ 保存 密码 ? 
登录 。 取消 
图 7-7 自动 显示 保存 的 用 户 名 和 密码 


73.3 ”使 用 localStorage 对 象 中 的 clear0 方 法 


在 HTML 5 中 ， 可 以 调用 localStorage 对 象 中 的 方法 clear0 清 空 localStorage 对 象 中 保存 


的 所 有 数据 。 调 用 格式 如 下 : 


localStorage .clear(); 


方法 clear0 是 一 个 无 参数 方法 ， 表 示 清 空 全 部 的 数据 。 一 旦 使 用 localStorage 对 象 保存 了 


数据 ， 用 户 就 可 以 在 浏览 器 中 打 


工具 进行 侦 测 。 


相应 的 代码 调试 工具 ， 查 看 每 条 数据 对 应 的 键 名 与 键 值 。 
执行 删除 或 清空 操作 后 ， 其 对 应 的 数据 也 会 发 生变 化 ， 这 些 变 化 可 以 通过 浏览 器 的 代码 调试 


下 面 将 通过 一 个 实例 讲解 使 用 localStorage 对 象 中 的 clear0 方 法 的 方法 。 


实例 7-5 说 ag 
源码 路 径 daima\7\5.html 
功能 使 用 localStorage 对 象 中 的 clear0 方 法 


实例 文件 5.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 
<html> 

<head> 

«meta charset-"utf-8" /> 


<title> 清 空 /保存 数据 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" language="jscript" 


src="Js5.Js"/> 
</script> 
</head> 
<body> 


<input id="btnAdd" type="button" value=" 增 加 数据 " 
class-"inputbtn" onClick-"btnAdd Click();"> 
«input id-"btnDel" type="button" value=" 清 空 数据 " 


class 


inputbtn" onClick-"btnDel Click();"> 
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<p id="pStatus"></p> 
</body> 
</html> 


脚本 文件 js5.js 的 代码 如 下 。 


// JavaScript Document 
function $$(id) í 
return document.getElementBylId(id); 
} 
var intNum = 0; 
1/ 点击" 增加 "按钮 时 调用 
function btnAdd Click() í 
for (var intl = 0; intl <= 7; intI+t+) í 
var strKeyName = "strKeyName" + intl; 
var strKeyValue = "strKeyValue" + intl; 
localStorage.setItem(strKeyName, strKeyValue); 
intNum++; 


} 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML = "已 成 功 保存 <b>" + intNum + "</b> 条 数据 记录 ! "; 


} 
/点 击 "清空 "按钮 时 调用 
function btnDel Click() ( 
localStorage.clear(); 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML = "已 成 功 清 空 全 部 数据 记录 ! "; 


j 


执行 后 的 效果 如 图 7-8 所 示 ， 单 击 “ 增 加 数据 ”按钮 后 会 保存 8 条 数据 记录 。 如 图 7-9 
所 示 。 


了) 清空 /保存 数据 - orilla Firefox -|nl xl 


= D| xl WO 4380) SEV PRO SEQ IAN 
XO RRO SEV PRO BED IAD (enen aars ma |as 
|» axem BMIELSLETC > | 全 清空 / 保 @ f r3 ~ Š 
— = e o C ||- 87 H 
9 e |Œ- 8 | $-t à 


" 清空 数据 
增加 数据 清空 数据 


已 成 功 保存 8 条 数据 记录 


图 7-8 初始 效果 图 7-9 保存 8 条 数据 记录 
单 击 “ 清 空 数据 ”按钮 后 会 删除 保存 的 8 条 数据 记录 ， 如 图 7-10 所 示 。 
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7.3.4 f& FH localStorage 对 象 中 的 属性 "ks an TE 
PMET - [a] 百度 搜索 _ 副 处 级 清空 / 保 ; 
为 了 查看 localStorage 对 象 保 存 的 全 部 数据 信息 ， 通 常 要 or- eE 57] e eje 
Md] ari, EWE, wusiuilM]localStorage Xj$&If] "e eee 
如 下 两 个 属性 ; 已 成 功 清空 全 部 数据 记录 
口 length: 表示 localStorage 对 象 中 保存 数据 的 总 量 。 à 


O key: 表示 保存 数据 时 的 键 名 项 ， 该 属性 常 与 索引 号 
(index) 配 合 使 用 ， 表 示 第 儿 条 键 名 对 应 的 数据 记录 。 
其 中 ， 索 引号 (index) 以 0 值 开始 。 假 设 取 第 3 条 键 名 
对 应 的 数据 ， 则 index 值 应 该 为 2。 图 7-10 删除 保存 的 8 条 数据 记录 

下 面 通过 一 个 实例 讲解 通过 遍历 的 方式 在 网 页 中 获取 并 显示 数据 的 方法 。 


实例 7-6 说 HJ 
源码 路 径 daima\7\6.html 
功能 通过 遍历 的 方式 在 网 页 中 获取 并 显示 数据 


本 实例 的 功能 是 在 页 面 中 通过 遍历 的 方式 获取 localStorage 对 和 象 保存 的 全 部 点 评 数 据 记 
录 。 在 文本 框 中 输入 内 容 ， 单 击 “ 发 表 ” 按 钮 后 可 以 通过 localStorage 对 象 保存 输入 的 数据 ， 
并 在 页 面 中 实时 显示 这 些 数据 。 实 例文 件 6.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 
«meta charset-"utf-8" /> 
«titled J EG title 
<link href-"css.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" language="jscript" 
src="Js6.Js"/> 
</script> 
</head> 
<body onLoad="getlocal Data();"> 
<ul id="ulMessage"> 


正在 读 取 数 据 中 .… 
<ul> 
<p class="p4"> 


<textarea id-"txtContent" class-"inputtxt" 
cols-"37" rows-" 5" 
</textarea><br> 
«input id="btnAdd" type="button" value=" 发 表 " 
class-"inputbtn" onClick-"btnAdd Click();"— 
</p> 
</body> 


</html> 
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编写 脚本 文件 js6.js， 设 置 在 加 载 页 面 时 会 调用 
据 localStorage 对 象 的 length 
上 中， 通过 变量 “strKey” 保 存 每 次 遍历 的 键 名 。 


过 程 量 
对 象 中 保存 的 点 评 数据 ， 检 测 键 名 前 


un 


3 个 字符 是 否 为 “cnt”。 


自 定义 的 函数 getlocalData0)。 此 函数 会 根 


H> EH for 语句 遍历 localStorage 对 象 保 存 的 全 部 数据 。 在 遍历 


在 获取 键 名 
如 


后 ， 为 了 只 获取 localStorage 
果 是 ， 则 通过 方法 getltem() 
字符 串 ， 所 以 先 


获取 键 名 对 应 的 键 值 ， 并 保存 在 变量 “strVal”， 
通过 数组 strArr 保存 分 割 后 的 各 项 数值 ， 然 后 
如 果 在 页 面 中 输入 点 评 内 容 ， 单 击 “ 发 
btnAdd_Click()。 此 函数 先 获取 点 评 内 容 ， 然 后 ， 
内 容 的 键 名 不 重复 ， 并且 具有 标记 1 
MAF, FEITTI “cnt” HERH 

据 信息 ， 保 存 点 评 内容 的 变量 “strContent” 通 
变量 “strVal” 中 。 最 后 ， 通 过 方法 setItem() 将 变量 
值 保存 在 localStorage 对 象 中 。 文 件 js6.js 的 代码 如 


° 
` 
TN 
N 


iE 


过 


F- L 


4A 


$ 


— Id 


TES AER 


H 
Hs 


// JavaScript Document 
function $$(id) { 
return document.getElementByld(id); 
} 
/点 击 " 发 表 " 按 钮 时 调用 
function btnAdd Click() í 
/获取 文本 框 中 的 内 容 
var strContent = $$("txtContent").value 
/定义 一 个 目 期 型 对 象 
var strTime = new Date(); 
/如 果 不 为 宇 ， 则 保存 
if (strContent.length > 0) í 
var strKey = "cnt" + RetRndNum(4); 


E 


数组 下 标 将 各 
表 ” 按 钮 后 会 


FE, 在 生成 键 名 时 调 月 
保存 在 变 
过 


因为 键 值 是 由 “,” 组 成 的 字符 串 ， t 
项 获取 的 内 容 显示 在 页 面 中 。 
半 用 另外 一 个 自 定 义 的 函数 
容 存 在 变量 “strContent” 中 。 为 了 使 保存 
函数 RetRndNum()， 随 机 生成 一 个 4 
strKey” 中 。 为 了 保存 更 多 的 数 
”与 时 间 数 据 组 合成 新 的 字符 串 ， 保 存在 
“strKey” 与 “strVal” 分 别 作为 键 名 与 键 
Fs 


E. 6 
FR 


var strVal = strContent + "," + strTime.toLocaleTimeString(); 


localStorage.setItem(strK ey, strVal); 


} 

/重新 加 载 

getlocalData(); 
/清空 原先 内 容 

$$("txtContent").value=""; 


j 


/获取 保存 数据 并 显示 在 页 面 中 
function getlocalData() í 
/标题 部 分 
var strHTML = "<li class-'li h'>"; 
strHTML += 
strHTML += 
strHTML += 


str HTML += "</li>"; 
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"<span class='spn_a> 编 号 </span>"; 
"<span class-'spn b'» VJ </span>"; 


"<span class='spn_c'> 时 间 </span>"; 
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// 内 容 部 分 
var strArr = new Array(); /定义 一 数组 
for (var intl = 0; intl < localStorage.length; intH+) í 
/获取 Key 值 
var strKey = localStorage.key(intD; 
/过 滤 键 名 内 容 
if (strKey.substring(0, 3) == "cnt") í 
var strVal = localStorage.getltem(strKey); 
strArr = strVal.split(","); 
strHTML += "<li class-'li c'>"; 
strHTML += "<span class-'spn a'2" + strKey + "</span>"; 
strHTML += "<span class='spn_b'>" + strArr[0] + "</span>"; 
strHTML += "<span class='spn_c'>" + strArr[1] + "</span>"; 
strHTML += "</li>"; 


j 
$$("ulMessage").innerHTML = strHTML; 
} 
/生成 指定 长 度 的 随机 数 
function RetRndNum(n) í 
var strRnd = ""; 
for (var intl = 0; intl < n; intIt+) í 
strRnd += Math.floor(Math.random() * 10); 


j 
return strRnd; 
j 
执行 后 的 效果 如 图 7-11 所 示 。 
习 遍历 数据 - Eozilla Firefox - [D| x| 
文件 到 REO SEV PRO HEO IAW HW 
| 加 遍历 数据 ES 
ISI] e|[ë-s P| @ - Ate m 5: 
s 内 容 时 间 
cnt2831 aaa 6:13:33 
cnt9160 aaa 6:19:00 
cnt20T4 aaa 8:13:35 
cnt5818 ^ aaaaaaaaaaaaaaa 5:13:22 
发 表 
~ 


图 7-11 执行 效果 
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7.4 WebDB 存储 方式 


本 章 前 面 已 详细 介绍 了 Web Storage 存储 本 地 数据 的 方法 ,虽然 这 种 存储 方法 比较 简单 方 
便 ， 但 是 Web Storage 存储 空间 容量 只 有 5MB， 所 以 这 种 以 键 值 存储 的 方式 会 带 来 诸多 不 便 ， 
为 此 推出 了 Web SQL 数据 库 (Web SQL DataBase 简称 为 WebDB), 它 内 置 了 SQLite 数据 库 ， 
对 数据 库 的 操作 可 以 通过 调用 方法 executeSql0 实 现 ， 允 许 使 用 JavaScript 代码 控制 数据 库 的 
操作 。 


7.4.1 WebDB 存储 基础 


WebDB 可 以 实现 数据 的 本 地 存储 ， 它 提供 了 关系 数据 库 的 基本 功能 ， 可 以 存储 页 面 中 交 
互 的 、 复 杂 的 数据 。 既 可 以 保存 数据 ， 也 可 以 缓存 从 服务 器 获取 的 数据 。WebDB 通过 事务 驱 
动 实 现 对 数据 的 管理 ， 因 此 可 以 支持 多 浏览 器 的 并 发 操作 ， 而 不 发 生存 储 时 的 冲突 。 

如 果 要 通过 WebDB 进行 本 地 数据 的 存储 , 首先 需要 打开 或 创建 一 个 数据 库 , 打开 或 创建 
数据 库 的 API 是 openDatabase， 其 调用 代码 如 下 : 


l 


openDatabase (DBName,DBVersion,DBDescribe,DBSize, Callback()); 


参数 DBName: 表示 数据 库 名 称 。 
参数 DBVersion: 表示 版 本 号 。 
参数 DBDescribe: 表示 对 数据 库 的 描述 。 
参数 DBSize: 表示 数据 库 的 大 小 , 单位 为 字 节 , 如 果 是 2MB, 必须 写成 2*1024*1024. 
口 参数 Callback0: 表示 创建 或 打开 数据 库 成 功 后 执行 的 一 个 回调 函数 。 
当 调用 此 方法 时 ， 如 果 指 定 的 数据 库 名 存在 ， 则 打开 该 数据 库 。 和 否则 新 创建 一 个 指定 名 
称 的 空 数据 库 。 
下 面 将 通过 一 个 实例 讲解 使 用 openDatabase 打开 、 创 建 数据 库 的 方法 。 


Ü C LD 


实例 7-7 说 — HJ 
源码 路 径 daima V7 V7.html 
功能 使 用 openDatabase 打开 、 创 建 数据 库 


实例 文件 7.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title> 打 开 /创建 数据 库 </title> 

<link href="Css/css8.css" rel="stylesheet" type="text/css"> 

<script type="text/javascript" language="jscript" 
sre="Js/js7.js"/> 

</script> 

</head> 
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<body> 
«input id="btnCreateDb" type="button" value=" 创 建 数据 库 " 
class="inputbtn" onClick="btnCreateDb_Click();"> 
«input id="btnTestConn" type-"button" value=" 查 看 连接 " 
class-"inputbtn" onClick-"btnTestConn Click();"> 
«p id="pStatus"></p> 
</body> 
</html> 


编写 脚本 文件 js7.js， 首 先 定义 了 一 个 全 局 性 变量 “db” 来 保存 打开 的 数据 库 对 象 。 当 用 
户 单 击 “ 创 建 数 据 库 ” 按 钮 时 ， 调 用 自 定义 函数 btnCreateDb. Click0， 通 过 此 函数 “创建 / 打 
开 ” 一 个 名 为 “Student” 的 数据 库 对 象 ， 此 数据 对 象 的 版 本 号 为 “1.0”， 大 小 为 2MB。 如 果 
创建 成 功 则 执行 回调 函数 ， 并 在 回调 函数 中 显示 执行 成 功 的 提示 信息 。 当 单 击 “ 测 试 连接 ” 
按钮 时 ， 调 用 另外 一 个 自 定义 的 函数 btnTestConn_Click0， 通 过 此 函数 根据 全 局 变量 “db” 的 
状态 ， 显 示 与 数据 库 的 连接 是 否 正常 的 提示 信息 。 文 件 js7.js 的 代码 如 下 。 


T 


// JavaScript Document 
function $$(id) í 
return document.getElementById(id); 
j 
var db; 
/点 击 “ 创 建 数据 库 ” 按 钮 时 调用 
function btnCreateDb Click() í 
db = openDatabase('Student3', '1.0', 'StuManage', 2 * 1024 * 1024, 
function() í 
$$("pStatus").style.display = "block"; 
$S("pStatus").innerHTML = "Ai Ee ££ JJ"; 


35 


j 
/点 击 “ 测 试 连接 ”按钮 时 调用 
function btnTestConn Click() í 
if (db) ( 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML = jii EE ~I!" 


} 
j 
执行 后 的 效果 如 图 7-12 所 示 。 

打开 /创建 数据 库 — Nozilla Firefox = D| xj 

文件 四 REO SEV PO HEO IAW 帮助 中 

(enz = [C imu 5 web sore |nan x | 
j0| O77 cg- pƏ e: f| e m ss 

创建 数据 库 | Says 


图 7-12 执行 效果 
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742 ”执行 事务 操作 

在 “打开 /创建 ”数据 库 后 ， 可 以 使 用 数据 库 对 象 中 的 transaction 方法 执行 事务 处 理 。 每 
一 个 事务 处 理 请 求 都 作为 数据 库 的 独立 操作 ， 这 样 可 以 有 效 地 避免 在 处 理 数据 时 发 生 冲 突 。 
具体 调用 格式 如 下 : 


transaction (TransCallback, ErrorCallback,SuccessCallback); 


口 参数 TransCallback: 表示 事务 回调 函数 ， 可 以 写 入 需要 执行 的 SQL 语句 。 
C) 参数 ErroCallback: 表示 执行 SQL 语句 出 错时 的 回调 函数 。 

口 参数 SuccessCallback: 表示 执行 SQL 语句 成 功 时 的 回调 函数 。 

下 面 通过 一 个 实例 讲解 执行 事务 操作 的 方法 。 


实例 7-8 说 gj 
源码 路 径 daima\7\8.html 
功能 执行 事务 操作 


在 本 实例 的 页 面 中 ， 添 加 了 一 个 “执行 事务 ”按钮 ， 当 用 户 单 击 该 按钮 时 ， 执 行 一 条 新 
建 名 为 表 StuInfo 的 SQL 语句 ， 并 在 页 面 中 显示 执行 后 的 结果 。 实 例文 件 8.html 的 实现 代码 
如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title> 执 行事 务 </title> 

<link href="css.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" language="jscript" 


src="Js8.Js"/> 
</script> 
</head> 
<body> 
«input id="btnCreateTrans" type="button" value=" 执 行事 务 " 
class="inputbtn" onClick-"btnCreateTrans Click();"> 
<p id="pStatus"></p> 
</body> 
</html> 


编写 脚本 文件 js8.js， 当 单 击 “ 执 行事 务 ” 按 钮 时 调用 自 定 义 函 数 btnCreateTransClick()。 
此 函数 先 使 用 方法 openDatabase0 打 开 / 创 建 一 个 名 为 “Student” 的 数据 库 ， 如 果 成 功 〈 即 数 
据 对 象 db 不 为 空 ) 则 定义 一 个 SQL 语句 ， 通 过 字符 变量 strSQL 保存 。 该 SQL 语句 的 功能 
是 ， 如 果 不 存在 则 新 建 一 个 名 为 “StuInfo” 的 表 ， 该 表 中 包含 4 个 字段 ， 分 别 为 “StuID”、 
“Name”、“Sex”“Score”。。 其 中 ， 字 段 “StuID” 为 主键 ， 不 允许 重复 ， 字 7 段 “Score” 为 
int 类 型 ， 其 他 两 个 字段 为 字 符 型 。 然后 使 用 方法 transaction(0) 执 行事 务 ， 在 该 方法 的 第 一 个 
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参数 中 获取 变量 strSQL 的 值 ， 调 用 executeSql 方法 执行 对 应 的 SQL 语句 。 最 后 ， 将 事务 
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执行 过 程 中 的 结果 ， 通 过 transaction 方法 中 的 第 二 个 与 第 三 个 回调 函数 显示 在 页 面 中 。 文 
fF js8.js 的 代码 如 下 。 


function $$(id) í 
return document.getElementById(id); 
j 
var db; 
IL 点击“ 执行 事务 ”时 执行 
function btnCreateTrans Click() í 
/创建 /打开 数据 库 
db = openDatabase('Student', '1.0', 'StuManage', 2 * 1024 * 1024); 
if (db) í 
var strSQL = "0"; 
strSQL += "(StuID unique,Name text,Sex text,Score int)"; 
db.transaction(function(tx) í 


tx.executeSql(strSQL) 
J 
function() í 

Status Handle(" H £B!"); 
j , 


function() í 
Status Handle("3:27]!); 
D) 
} 
j 
// 自 定义 显示 执行 过 程 中 状态 的 函数 
function Status Handle(message) { 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML = message; 


} 
执行 后 的 效果 如 图 7-13 所 示 。 NO RAD SEO PEO SEQ TAD DNE 
(PER < | 让 执行 事务 TEEGA x| 
743 ”调用 执行 SQL 语句 ee 
Ame 


在 HTML 5 中 可 以 通过 执行 相应 的 SQL 语句 ， 在 新 


ENK! 


还 要 调用 一 个 执行 SQL 语句 的 方法 executeSql。 具体 调用 
格式 如 下 : 


插入 一 条 记录 。 在 实现 时 除了 要 调用 事务 方法 ， 


图 7-13 ”执行 效果 


executeSql(strSQL, [Arguments], SuccessCallback, ErrorCallback); 


O 参数 strSQL: 表示 需要 执行 的 SQL 语句 。 
口 参数 Arguments: 表示 语句 需要 的 实 参 。 
O 参数 SuccessCallback: 表示 SQL 语句 执行 成 功 时 的 回调 函数 。 


H 
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O 参数 ErrorCallback: 表示 SQL 语句 执行 出 错时 的 回调 函数 。 


在 使 用 方法 executeSql 执行 SQL 语句 时 ， 人 允许 使 用 “?” 作 为 语句 中 的 形 参 ， 与 形 参 相对 


应 的 实 参 放置 在 第 二 个 参数 Arguments 中 。 例 如 下 面 的 语句 是 正确 的 : 


executeSql( "insert into Stulnfo  values(?,2,2,2)", 
["1234" "5k =" "B" "9; 


E 


形 参 “?” 的 数量 必须 与 对 应 实 参 完全 一 致 ， 如 果 SQL 语句 中 没有 形 参 “?”， 则 在 第 二 
个 参数 sss 中 不 允许 有 任何 出 错 内 容 ， 和 否则 执行 SQL 语句 时 会 报错 。 


下 面 将 通过 一 个 实例 讲解 调用 执行 SQL 语句 的 方法 。 
实例 7-9 说 — UJ 
源码 路 径 daima\7\9.html 
功能 调用 执行 SQL 语句 


性 别 、 


ASA | 的 功能 是 创建 了 一 个 用 于 输入 学 生 资料 信息 的 页 面 , 用 户 可 以 在 页 面 中 输入 姓名 、 


总 分 ， 单 击 “ 提 交 ” 按 钮 后 ， 会 将 提交 的 数据 信息 通过 调用 方法 executeSql0 插 入 到 表 


Stulnfo H 
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P， 并 将 执行 结果 返回 ， 显 示 在 页 面 中 。 实 例文 件 9.html 的 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title> 插 入 记录 </title> 

<link href-"css.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" language="jscript" 


src-"js9.js"/7 
</script> 
</head> 
<body onLoad-"Init Data(); > 
<p id="pStatus"></p> 
<fieldset> 
<legend> 新 增 学 生 资料 </legend> 
«span class="spanl"> 
学 号 : <inputtype="text" readonly-"true" id="txtStuID" 
class-"inputtxt" size="10"><br> 
姓名 : <input type="text" id="txtName" class="inputtxt" 


size="15"> 


</span> 
<span class="spanr"> 
性 别 : «select id="selSex"> 
«option value=" 男 "> 男 </option> 
«option Value=" 女 "> 女 </option> 
</select><br> 
总 分 : <input type="text" id="txtScore" class="inputtxt" 


size="8"> 
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</span> 
<p class="btn"> 
«input id-"btnAdd" type="button" value-" 3 ^7" 
class-"inputbtn" onClick-"btnAdd Click();"> 
</p> 
</fieldset> 
</body> 
</html> 


编写 脚本 文件 js9.js 中 ,在 事务 处 理 过 程 中 调用 方法 executeSq10 执 行 编写 好 的 SQL 语句 。 


在 执行 时 获取 在 页 面 中 输入 的 各 项 信息 值 作为 实 参 传递 给 SQL 语句 中 的 形 参 ， 从 而 实现 将 
页 面 中 输入 的 数据 插入 到 表 “StuInfo” 中 。 文 件 js9.js 的 代码 如 下 。 


function $$(id) { 
return document.getElementById(id); 
} 
var db; 
// 点 击 “ 提 交 ” 按 钮 时 调用 
function btnAdd Click() í 
// 创 建 /打开 数据 库 
db = openDatabase('Student', '1.0', 'StuManage', 2 * 1024 * 1024); 
if (db) í 
var strSQL = "insert into Stulnfo values"; 
strSQL += "(?,?,?,?)"; 
db.transaction(function(tx) { 
tx.executeSgl(strSQL,[ 
$S("txtStuID").value,$$("txtName").value, 
$$("selSex").value,$$("txtScore").value 


|b 
function() í 
$$("txtName").value=""; 
$$("txtScore").value=""; 
Status_Handle(" 成 功 增加 1 条 记录 !") 


} 
function(tx,ex){ 

Status Handle(ex.message) 
J) 


j 

j 

// 自 定义 显示 执行 过 程 中 状态 的 函数 

function Status Handle(message) { 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML = message; 


E 
pm 


生成 指定 长 度 的 随机 数 
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— 00 
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function RetRndNum(n) í 
var strRnd = ""; 
for (var intl = 0; intl < n; intIt+) í 
strRnd += Math.floor(Math.random() * 10); 
j 
return strRnd; 
} 
/初始 化 数据 
function Init Data(){ 
$$("txtStuID").value=RetRndNum(6); 
j 


在 上 述 代码 中 , 加 载 页 面 时 先 调用 一 个 自 定义 的 函数 Init Data0。 该 函数 可 以 随机 生成 一 
个 6 位 数 的 字符 ， 并 将 该 值 赋 于 页 面 中 的 “学 号 ”文本 框 。 为 了 使 该 学 号 不 能 修改 ， 特 意 将 


此 文本 
定义 的 
有 的 内 


ZEE 


框 的 属性 设置 为 “只 读 ” 当 完 成 输入 学 生 信息 的 其 他 资料 ， 单 击 “ 提 交 ” 按 钮 调用 自 
函数 btnAddClick0， 此 函数 先 打开 数据 库 。 当 成 功 执行 SQL 语句 后 , 会 清空 页 面 中 原 
容 值 ， 并 显示 “成 功 增 加 1 条 记录 !” 的 提示 。 如 果 SQL 语句 执行 出 错 ， 将 在 页 面 中 显 
对 象 ex 返回 的 错误 信息 


执行 后 的 效果 如 图 7-14 所 示 。 


DASAGix - Norilla Firefox =|D| x| 

THO 编辑 人 E) SEV mec) HEO IAT) SB500 

LT SNC x 
E00 EFIE SIFMESBIP 
三 新 增 学 生 资 料 

| 学 号 662091 性 别 :| 男 v0 

| 姓名 : Ba: 

| Sx 


图 7-14 执行 效果 


15 ”实现 一 个 日 记 式 事务 提醒 系统 

ft HTML 5 应 用 中 ， 可 以 使 用 localStorage 对 象 的 方法 setItem 将 数据 永久 保存 在 客户 端 
计算 机 中 ， 并 且 按 照 “ 键 名 / 键 值 ”的 形式 进行 保存 。 将 第 一 个 参数 设置 为 键 名 ， 将 第 二 个 参 
数 设置 为 键 值 。 保 存 时 不 允许 重复 保存 相同 的 键 名 。 保 存 后 可 以 修改 键 值 ， 但 不 允许 修改 键 
名 ， 只 能 重新 取 键 名 ， 然 后 再 保存 键 值 。 

变量 = localStorage.getltem(key) 

使 用 localStorage 对 象 的 方法 getltem 将 数据 读 取 到 变量 中 ， 将 参数 指定 为 键 名 ， 返 回 键 
值 并 保存 到 变量 中 。 

下 面 通过 一 个 实例 讲解 开发 一 个 日 记 式 事务 提醒 系统 的 方法 。 
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实例 7-10 说 明 
源码 路 径 daima\7\10.html 
功能 开发 一 个 日 记 式 事物 提醒 系统 


本 实例 的 功能 是 ， 制 作 一 个 HTML 5 版 本 的 日 记 式 事务 提醒 系统 。 当 打开 浏览 器 浏览 
实例 网 页 时 时 ， 在 日 记 式 事务 系统 中 显示 当天 日 期 和 用 户 在 当天 有 哪些 必须 要 处 理 的 事件 。 
可 以 在 日 期 文本 框 中 使 用 选择 的 方式 输入 其 他 日 期 ， 然 后 在 日 记 式 事务 系统 中 输入 选择 的 日 
期 所 要 处 理 的 事件 并 保存 。 这 样 当 用 户 在 所 选择 的 日 期 打开 浏览 器 时 ， 浏 览 器 会 在 日 记 式 事 
务 提 醒 系 统 中 显示 在 该 日 要 处 理 的 事件 。 实 例文 件 10.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 
<head> 
«meta charset="UTF-8"> 
<title> 开 发 一 个 日 记 式 事务 提醒 系统 </title> 
<style> 
div{ 
-webkit-border-image: url(bg.png) 10; 


-moz-border-image: url(bg.png) 10; 
width:300px; 

height:300px; 

padding:35px; 

background:#eee; 
font-weight:bold; 


li{ 
list-style:none; 

} 

</style> 

<script type="text/javascript" language-"jscript" sre="js10.js"/> 

</script> 

</head> 

<body onload="window_onload()"> 

<h1> 开 发 一 个 日 记 式 事务 提醒 系统 </h1> 

选择 日 期 : <input id="datel" type="date" onchange="date_onchange()"><input type="button" value= 
"保存 " onclick="save()"/><br/> 


<div> 
本 日 日 期 : «span id="today"></span><br/> 
本 日 要 事 : <br/> 


«ul contentEditable="true"> 
<li id="lil">( 没 有 记录 ) </li> 
<li id="li2 必 (没有 记录 ) </li> 
<li id="li3 必 (没有 记录 ) </li> 
</ul> 

</div> 

</body> 

</html> 


EN 163 


HTML 5 天 发 从 入 门 到 精通 


HIHI span 元 素 。 文 件 js10.js 的 代码 如 下 。 


«script type="text/javascript"> 


var dateElement; 
var today; 
function window_onload() 
{ 
dateElement-document.getElementBylId("date1 "); 
today-document.getElementById("today"); 
setToday(); 
} 
function date onchange() 
{ 
var obj; 
if(isNaN(Date.parse(dateElement.value))) 
{ 
setToday(); 
return; 
} 
today.innerHTML-dateElement.value; 
0bj-JSON.parse(localStorage.getItem(dateElement.value)); 
setInnerHTML(obj); 
j 
function save() 
{ 
var obj=new Object(); 
obj.record=new Array(); 
if(document.getElementById("li1l").innerHTML!-" (£8 wK) ") 
obj.record.push(document.getElementBylId("li1").innerHTML); 
if(document.getElementById("li2").innerHTML!-" (4 wK) ") 
obj.record.push(document.getElementBylId("li2").innerHTML); 
if(document.getElementById("li3").innerHTML'!-" (244 WR) ") 
obj.record.push(document.getElementBylId("l13").innerHTML); 
if(document.getElementById("li4").innerHTML'!-" (244 WRK) ") 
obj.record.push(document.getElementBylId("li4").innerHTML); 
if(document.getElementById("li5").innerHTML'!-" (244 WR) ") 
obj.record.push(document.getElementById("115").innerHTML); 
localStorage.setItem(dateElement.value,JSON.stringify(obj)); 
j 
function setInnerHTML(obj) 
1 


if(obj—-nulll||obj.record--null) 


1 


编写 脚本 文件 js10js， 在 脚本 代码 的 开始 处 定义 了 脚本 代码 中 所 使 用 的 7 
中 变量 dateElement 表示 页 面 中 的 选择 日 期 文本 框 ， 变 量 today 表示 页 面 9 


document.getElementById("li1").innerHTMIL="( 没 有 记录 )"; 
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} 


第 7 章 ”数据 存储 应 用 详解 


document.getElementById("li2").innerHTMIL="( 没 有 记录 )"; 


document.getElementById("li3").innerHTMIL="( 没 有 记录 )"; 
document.getElementById("li4").innerHTMIL="( 没 有 记录 )"; 
document.getElementById("li5").innerHTMIL="( 没 有 记录 )"; 


if(obj.record[0]!=null) 


document.getElementBylId("l11").innerHTML -obj.record[0]; 


else 


document.getElementBylId("li1").innerHTML-" (7 £4 12K 2 


if(obj.record[1]!-null) 


document.getElementBylId("l12").innerHTML -obj.record[1]; 


else 


document.getElementBylId("li2").innerHTML "(7 £4 142 ) 


if(obj.record[2]!-null) 


document.getElementBylId("l13").1nnerHTML -obj.record[2]; 


else 


document.getElementById("li3").innerHTML-" (7 £4 15 ) 


if(obj.record[3 |'-null) 


document.getElementBylId("li4").innerHTML -obj.record[3]; 


else 


document.getElementBylId("li4").innerHTML-" (7 £4 WK) 


if(obj.record[4 |'2null) 


document.getElementBylId("l15").1nnerHTML -obj.record[5]; 


else 


document.getElementById("li5").innerHTML-" QF iK) "; 


function setToday() 


1 


var date-new Date(); 


var yearStr-String(date.getFullYear()); 
var monthStr-String(date.getMonth()--1); 
var dateStr-String(date.getDate()); 


if (monthStr.length == 1) 


dateElement.value-str; 


today.innerHTML-dateElement.value; 


monthStr = '0' + monthStr; 
if (dateStr.length — 1) dateStr = '0' + dateStr; 
var str=yearStr+"-"+monthStr+"-"+dateStr; 


var obj-JSON.parse(localStorage.getItem(dateElement.value)); 
setInnerHTML(obj); 


j 


</script> 


执行 后 的 效果 如 图 7-15 所 示 。 
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开发 一 个 日 记 式 事务 提醒 系统 


ADS: pozici deu 


E 


图 7-15 ”执行 效果 


1.6 ”使 用 sessionsStorage 来 实现 客户 端的 $ession 功能 


在 HIML 5 应 用 中 ，sessionStorage 有 如 下 三 个 常用 的 方法 。 

(1) sessionStorage.setltem (key,value) 

使 用 sessionStorage 对 象 的 setltem 方法 ， 可 以 将 数据 保存 在 客户 端的 session 中 ， 在 保存 
数据 时 会 按照 “ 键 名 / 键 值 ”的 形式 进行 保存 。 将 第 一 个 参数 指定 为 键 名 ， 将 第 二 个 参数 指 
定 为 键 值 。 并 且 在 保存 时 不 允许 重复 保存 相同 的 键 名 。 保 存 后 可 以 修改 键 值 ， 但 不 允许 修改 
键 名 (只 能 重新 取 键 名 ， 然 后 再 保存 键 值 )。 

(2) 变量 = sessionStorage.getItem(key) 
通过 使 用 sessionStorage 对 象 的 getItem 方法 , 可 以 读 取 session 中 的 数据 并 保存 到 变量 中 ， 
将 参数 指定 为 键 名 ， 返 回 键 值 并 保存 到 变量 中 。 

(3) sessionStorage.removeltem(key) 
通过 使 用 sessionStorage 对 象 中 的 removeltem 方法 ， 可 以 删除 客户 端 session 中 的 指定 键 
名 所 对 应 的 键 值 数据 。 该 方法 接受 一 个 参数 key， 该 参数 指定 sessionStorage 中 的 键 名 。 执 行 
该 方法 后 ， 会 删除 sessionStorage 中 与 键 名 相对 应 的 键 值 内 容 ， 下 次 读 取 该 键 名 中 的 内 容 时 将 
读 取 不 到 被 设 为 NULL). 

下 面 通 过 一 个 实例 讲解 使 用 sessionStorage 实现 客户 端 session 功能 的 方法 。 


实例 7-11 说 明 
源码 路 径 daima\7\11.html 
功能 使 用 sessionStorage 来 实现 客户 端的 session 功能 


本 实例 的 功能 是 ， 演 示 如 何 使 用 Web Storage 中 的 sessionStorage 来 实现 客户 端的 session 
功能 。 实 例文 件 11.html 的 实现 代码 如 下 。 
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<!DOCTYPE html> 
<html> 
<head> 
«meta charset="utf-8"> 
<title> 
编辑 订单 信息 
</title> 
<style type ="text/css"> 
body { 

margin-left: 0px; 


margin-top: 0px; 


ul{ 
width:100%; 
display: -moz-box; 
display: -webkit-box; 
-moz-box-orient: vertical; 
-webkit-box-orient:vertical; 
margin:0px; 


padding:0px; 


list-style:none; 


ulliulí 
display: -moz-box; 
display: -webkit-box; 
-moz-box-orient: horizontal; 
-webkit-box-orient:horizontal; 

} 

hlí 
font-size: 14px; 
font-weight: bold; 
color:white; 
background-color:#7088AD; 
text-align:left; 
padding-left: 10px; 
display:block; 
width:100%; 
margin:0px; 

} 

li[id^-title] ( 
font-size: 12px; 
color: #333333; 
background-color:ZE6E6E6; 
text-align:right; 
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padding-right:5px; 
width:110px; 

} 

li[id^-content] ( 
height:22; 
background-color:zZFAFAFA; 
text-align:left; 
padding-left:2px; 
width:210px; 

} 

span{ 
color: #ff0000; 

j 

input( 
width: 9596; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
border-top-color: 4426C7C; 
border-right-color: ZCCCCCC; 
border-bottom-color: £ZCCCCCC; 
border-left-color: 2426C7C; 
border:1px solid #0066cc; 
height: 18px; 

} 

input:read-only í 
background-color:yellow; 

j 

input:-moz-read-only í 
background-color:yellow; 


} 


input#tbxNum í 
text-align:right; 

} 

input#tbxPrice í 
text-align:right; 

j 

inputZtbxMoney( 
text-align:right; 

j 

div( 
text-align:right; 

j 

divzbuttonDiv( 
width: 10096; 
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j 
input[type-"button" |,input[type-" submit" ] ( 
font-size: 12px; 
width: 68px; 
height: 20px; 
cursor: hand; 
border:none; 
font-family: f/s; 
background-color: White; 
background-image:  url(images/but bg.gif); 
color: white; 
j 
</style> 
<script type="text/javascript" language: 


'jscript" 
sre="js11.js"> 


</script> 


</head> 

<body onload="window_onload()"> 
<section> 

«header id="div_head title big" 
<h1> 编 辑 订 单 信息 </h1> 
</header> 


«form id-"form1" > 


«ul» 
<]> 
<ul> 

<li id="title_1"><span>*</span><label for="tbxCode"> 订 单 编号 </label></li> 

<li id="content 1"><input type="text" id-"tbxCode" name="tbxCode" maxlength="8" 
autofocus/></li> 

<li id="title 2"><span>*</span><label for="tbxDate"> 订 单 日 期 </label></li> 

<li id="content 2"><input type="date" id="tbxDate" name-"tbxDate" maxlength="10" 
required/></li> 


<li id-"title 3"><span>*</span><label for-"tbxGoodsCode' [ii m Zi = </label></li> 
<li id="content_3"><input type="text" | id—"tbxGoodsCode" name-"tbxGoodsCode" 
maxlength-"12" placeholder=" 必 须 输 入 商品 编号" required/></li> 
</ul> 
</li> 
<li> 
<ul> 
<li id="title 4"><label for="tbxBrandName"> j &nbsp;&nbsp;&nbsp;&nbsp;#r</label></li> 
<li id="content_4"><input type="text" id="tbxBrandName" name="tbxBrandName" 
maxlength-"50" /></li> 
<li id="title_5"><label for="tbxNum'> 数 &nbsp;&nbsp;&nbsp;&nbsp; 量 </label></li> 
<li id="content_5"><input type-"number" id-"tbxNum" name-"tbxNum" maxlength-"6" 
value-"0" placeholder=" 必 须 输入 一 个 整数 值 " required onblur-"tbxNum onblur()" /></li> 
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<li id="title 6"><label for-"tbxPrice" f &nbsp;&nbsp;&nbsp;&nbsp; f/j «/label-—/li 
<li id="content_6"><input type="text" id="tbxPrice" name-"tbxPrice" maxlength-"6" 
value="0" placeholder=" 必 须 输入 一 个 有 效 的 单价 " required onblur="tbxPrice onblur()"/></li> 
</ul> 


</li> 


<li> 
<ul> 
<li id="title_7"><label for-"tbxMoney'4&nbsp;&nbsp;&nbsp;&nbsp; %i</label></li> 
<li id="content_7"><input type="text" id="tbxMoney" name="tbxMoney" readonly= 
"readonly" value="0" /></li> 
<li id="title_8"><label for="tbxPersonName"> fi &nbsp; vi &nbsp; A </label></li> 
<li id="content 8"><input type="text" id—"tbxPersonName" name-"tbxPersonName" 
maxlength="20"/></li> 
<li id-"title 9"><label for-"tbxEmail'" $4 7t À Email</label></li> 
<li id="content_9"><input type-"email" id="tbxEmail" name-"tbxEmail" maxlength="20" 
placeholder=" 请 输入 一 个 有 效 的 邮件 地 址 /></li> 
</ul> 
</li> 
</ul> 
<div id="buttonDiv"> 
<input type="submit" name-"btnUpdate" id="btnUpdate" value=" 修 改 " formaction= "javascript: 
btnUpdate_onclick();"/> 
«input type="button" name="btnDelete" id="btnDelete" value=" 删 除 " onclick="btnDelete_ 
onclick();" /> 


«input type="button" name="btnClear" id="btnClear" value=" 清 除 "  onclick="btnClear_ 


onclick();" /> 


«input type="button" name="btnReturn" id="btnReturn" value=" 返 回 " ^ onclick-"btnReturn - 
onclick();" /> 
</div> 
</form> 
<section> 
</body> 
</html> 


脚本 文件 jsl1js 的 代码 如 下 。 


var data; 

var db = openDatabase('MyData', ", 'test Database', 102400); 

function window_onload() 

1 
var str = sessionStorage.getItem("saveData"); 
data= JSON.parse(str); 
document.getElementById("tbxCode").value=data.Code; 
document. getElementById("tbxDate").value=data.Date; 
document.getElementById("tbxGoodsCode").value-data.GoodsCode; 
document.getElementBylId("tbxBrandName").value-data.BrandName; 
document.getElementBylId("tbxNum").value-data. Num; 
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document. getElementById("tbxPrice").value=data.Price; 
document.getElementBylId("tbxMoney").value-data.Money; 
document.getElementBylId("tbxPersonName").value-data.PersonName; 
document.getElementBylId("tbxEmail").value-data.Email; 
document.getElementById("tbxCode").setAttribute("readonly",true); 


function tbxNum onblur() 


1 


var num,price; 
num-parseInt(document.getElementById("tbxNum").value); 
price-parseFloat(document.getElementBylId("tbxPrice").value); 
if (isNaN(num*price)) 
Í 
document.getElementBylId("tbxNum").value-"0"; 
document.getElementById(" tbxMoney").value-"0"; 
j 
else 
document.getElementBylId("tbxMoney").value- num * price; 


function tbxPrice onblur() 


1 


j 


var num,price; 
num-parseInt(document.getElementBylId("tbxNum").value); 
price-parseFloat(document.getElementByld("tbxPrice").value); 


if ((sNaN(num*price)) 

1 
document.getElementBylId("tbxPrice").value-"0"; 
document.getElementById(" tbxMoney").value-"0"; 

j 

else 
document.getElementBylId("tbxMoney").value- num * price; 


function btnUpdate onclick() 


1 


data.Code-document. getElementBylId("tbxCode").value; 
data.Date-document.getElementBylId("tbxDate").value; 
data.GoodsCode-document.getElementById("tbxGoodsCode").value; 
data.BrandName-document.getElementById("tbxBrandName").value; 
data.Num-document.getElementBylId("tbxNum").value; 
data.Price-document.getElementBylId("tbxPrice").value; 
data.PersonName-document.getElementById("tbxPersonName").value; 
data.Email-document.getElementByld("tbxEmail").value; 
db.transaction(function(tx) 


{ 
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tx.executeSql('update orders set date=?,goodscode=?,brandName=?,num=?, price=?,person 
Name-?,email-? where code=?',[data.Date,data.GoodsCode,data.BrandName,data.Num,data.Price,data.PersonName, 


data. Email,data.Code], 
function(tx, rs) 
1 
alert(" 成 功 修改 数据 !"); 
H Li 
function(tx, error) 
{ 
alert(error.source + "::" + error.message); 
)); 
J) 
} 
function btnDelete onclick() 
1 


data.Code=document. getElementById("tbxCode").value; 
db.transaction(function(tx) 
{ 
tx.executeSql('delete from orders where code=?',[data.Code], 
function(tx, rs) 
1 
alert(" 成 功 删 除数 据 !"); 
btnReturn onclick(); 
J 
function(tx, error) 
1 
alert(error.source + "::" + error.message); 
J) 
J) 
j 
function btnClear onclick() 
1 
document.getElementBylId("tbxDate").value-""; 
document.getElementById("tbxGoodsCode").value-""; 
document.getElementBylId("tbxBrandName").value-""; 
document.getElementById("tbxNum").value-"0"; 
document.getElementByld("tbxPrice").value-"0"; 
document.getElementById("tbxMoney").value-"0"; 
document.getElementBylId("tbxPersonName").value-""; 
document.getElementBylId("tbxEmail").value-""; 
} 
function btnReturn onclick() 
1 
sessionStorage.removeltem("saveData"); 
window.location-setLocation(); 
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function setLocation() 


{ 
var location-String(window.location); 
location-location.replace("edit"," search"); 
return location; 

j 


文件 11_1.html 的 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 
«meta charset="utf-8"> 
<title> 
检索 订单 信息 
</title> 
<style type ="text/css"> 
body í 

margin-left: 0px; 


margin-top: Opx; 


j 
ul( 
width: 10096; 
display: -moz-box; 
display: -webkit-box; 
-moz-box-orient: vertical; 
-Wwebkit-box-orient:vertical; 
margin:Opx; 
padding:Opx; 
} 
Hí 
list-style:none; 
j 
ul li ul( 
display: -moz-box; 
display: -webkit-box; 
-moz-box-orient: horizontal; 
-webkit-box-orient:horizontal; 
} 
hlí 


font-size: 14px; 
font-weight: bold; 
color: white; 
background-color:27088AD; 
text-align:left; 
padding-left: 10px; 
display:block; 
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width:100%; 
margin:0px; 

} 

li[id^-title] ( 
font-size: 12px; 
color: #333333; 
background-color:ZE6E6E6; 
text-align:right; 
padding-right:5px; 
width:110px; 

} 

lilid^=content|{ 
height:22; 
background-colorzzFAFAFA; 
text-align:left; 
padding-left:2px; 
width:210px; 

} 

input( 
width: 9596; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
border-top-color: 4426C7C; 
border-right-color: ZCCCCCC; 
border-bottom-color: ZCCCCCC; 
border-left-color: #426C7C; 
border: 1px solid #0066cc; 
height: 18px; 

} 

div#buttonDiv{ 
text-align:left; 
padding-left:2px; 
width: 10096; 


j 


input[type-" submit" ],button í 
font-size: 12px; 
width: 68px; 
height: 20px; 
cursor: hand; 
border:none; 
font-family: R; 
background-color: White; 
background-image:  url(but bg.gif); 
color: white; 
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j 


divzinfoTable í 
overflow:auto; 
width: 10096; 
height:10096; 

j 

div£infoTable table 
width: 10096; 
background-color:white; 
cellpadding:1; 
cellspacing:1; 
font-size: 12px; 
text-align: center; 

j 

divzinfoTable table thí 
height:22; 
background-color:7088AD; 
color: ZFFFFFF; 
width:896; 

j 

divzinfoTable table trí 
height:30; 


j 


divzinfoTable table tr:nth-child(odd)( 
background-color:ZE6E6E6; 
color: 2333333; 

| 

div#infoTable table tr:nth-child(even)í 
background-color:#fafafa; 
color: black; 

j 

divzinfoTable table tr:nth-child(1)( 
background-color:7088AD; 
color: ZFFFFFF; 


j 
</style> 


<script type="text/javascript" language="jscript" 
sre="js11_1.js"> 


</script> 


</head> 

<body> 

<section> 

«header id="div_head title big" 
<h1> 检 索 订 单 信息 </h1> 
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</header> 
<form id="form1"> 
<ul> 
<]> 
<ul> 
<li id-"title 1"><label for="tbxCode"> 订 单 编写 </label></li> 
<li id="content 1"><input type="text" id="tbxCode" name="tbxCode" maxlength="8"/></li> 
</ul> 
<ul> 
<li id-"title 2"><label for="tbxDate"> 订 单 日 期 </label></li> 
<li id="content 2"><input type="date" id="tbxDate" name-"tbxDate" maxlength="10"/></li> 
</ul> 
<ul> 


<li id="title 3"><label for="tbxGoodsCode"> 商 品 编号 </label></li> 
<li id="content 3"><input type="text" 1d="tbxGoodsCode" name="tbxGoodsCode" 
maxlength="12"/></li> 
</ul> 
</li> 
</ul> 
«div id="buttonDiv"> 
<input type="submit" name="btnSearch" id="btnSearch" value=" 检 索 " formaction= "javascript: 
btnSearch click();" /> 
</div> 
</form> 
<section> 
<section> 
<header id-"div head title_big"> 
<hl> 检 索 结果 </h1> 
</header> 
«div id="infoTable"> 
<table id="datatable"> 
<tr> 
<th> 订 单 编号 </th> 
<th> 订 单 日 期 <th> 
<th> 商 品 编 号 </th> 
<th> 商 标 </th> 
<th> 数 量 </th> 
<th> 单 价 </th> 
<th> 金 额 </th> 
<th> 负 责 人 </th> 
<th> 负 责 人 Email</th> 
<th></th> 
</tr> 
</table> 
</div> 


</section> 
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</body> 


</html> 
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脚本 文件 jsll_1js 的 代码 如 下 。 


var data = new Object; 

var datatable; 

var db = openDatabase('MyData', ", 'test Database', 102400); 
function btnSearch click() 


1 
datatable- document.getElementById("datatable"); 
data.Code-document.getElementByld("tbxCode").value.trim(); 
data.Date-document.getElementBylId("tbxDate").value.trim(); 
data.GoodsCode-document.getElementBylId("tbxGoodsCode").value.trim(); 
if(data.Code—"" &&data.Date—-"" &&data.GoodsCode--"") 
alert(" 必 须 输入 一 个 检索 条 件 "); 
else 
SearchData(); 
j 
function SearchData() 
1 


db.transaction(function(tx) 


1 


var sql; 

var params-new Array(); 

sgl-" SELECT * FROM orders where 1-1"; 
if(data.Code!="") 


{ 
sql+=" and code=?"; 
params.push(data.Code); 
j 
if(data.Date!="") 
{ 
sql+=" and date=?"; 
params.push(data.Date); 
} 
if(data.GoodsCode!-"") 
1 
sql+=" and goodscode-?"; 
params.push(data.GoodsCode); 
j 
tx.executeSgl(sgl,params, function(tx, rs) 
1 


removeAllData(); 
for(var i = 0; i < rs.rows.length; i++) 
1 


showData(rs.rows.item(1),1); 
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} 
j , 
function(tx, error) 
1 
alert(error.source + "::"  error.message); 
D 
» 
j 
function removeAllData() 
1 
datatable- document.getElementById("datatable"); 
for (var i 2datatable.childNodes.length-1; i71; i- —) 
1 
datatable.removeChild(datatable.childNodes[1]); 
j 
j 
function showData(row,i) 
1 


var tr = document.createElement('tr"); 
var tdl = document.createElement('td"); 
tdl.innerHTML = row.code; 

var td2 = document.createElement('td"); 
td2.innerHTML = row.date; 

var td3 = document.createElement('td'); 
td3.innerHTML = row.goodscode; 

var td4 = document.createElement('td"); 
td4.innerHTML = row.brandName; 

var td5 = document.createElement('td"); 
td5.innerHTML = row.num; 

var td6 = document.createElement('td"); 
td6.innerHTML = row.price; 

var td7 = document.createElement('td"); 
td7.innerHTML = parseInt(row.num)*parseFloat(row.price); 
var td8 = document.createElement('td"); 
td8.innerHTML - row.personName; 
var td9= document.createElement('td"); 
td9.innerHTML - row.email; 

var td10— document.createElement('td'); 


var btnEdit-document.createElement( button"); 
btnEdit.innerHTML-" gif"; 
btnEdit.setAttribute("onclick","btnEdit click(this)"); 
td10.appendChild(btnEdit); 

tr.appendChild(td1); 

tr.appendChild(td2); 

tr.appendChild(td3); 
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tr.appendChild(td4); 
tr.appendChild(td5); 
tr.appendChild(td6); 
tr.appendChild(td7); 
tr.appendChild(td8); 
tr.appendChild(td9); 
tr.appendChild(td10); 
datatable.appendChild(tr); 

j 

function btnEdit click(btnEdit) 

{ 
var tr = btnEdit.parentElement.parentElement; 
data — new Object(); 
data.Code=tr.cells[0]. innerHTML; 
data.Date=tr.cells[1 ]. innerHTML; 
data.GoodsCode-tr.cells[2 ].innerHTML ; 
data.BrandName-tr.cells[3 ].. nnerHTML; 
data.Num-tr.cells[4].1nnerHTML; 
data.Price-tr.cells[5 J.[nnerHTML; 
data.Money-tr.cells[6].innerHTML; 
data.PersonName-tr.cells[7].innerHTML ; 
data.Email-tr.cells[8 ].innerHTML ; 
var str — JSON.stringify(data); 
sessionStorage.setItem("saveData" str); 
window.location-setLocation(); 

j 

function setLocation() 

{ 
var location-String(window.location); 
location-location.replace("search","edit"); 
return location; 


} 
执行 后 的 效果 如 图 7-16 所 示 。 


负责 人 Enail | 请 输入 一 个 有 效 的 邮件 地 址 


检索 订单 信息 
s 
gama — — — Ë 


商品 编号 


im TI RSS IT ET NENNEN NENNEN REK USER 775770 T | 


图 7-16 执行 效果 


SEN 179 


第 8 全 使 用 Web Sockets API 


Web Sockets API 是 HTML 5 提供 的 一 种 Web 应 用 通信 机 制 , 通过 这 种 机 制 实现 了 客户 端 


与 服务 器 端 之 间 进 行 的 非 HTTP 的 通信 功能 。 通 过 使 用 Web Sockets API 技术 ， 


可 以 在 服务 器 


与 客户 端 之 间 建 立 一 个 非 HTTP 的 双向 连接 。 当 服务 器 想 向 客户 端 发 送 数据 时 ， 可 以 立即 将 


数据 推送 到 客户 前 


接 字 ) 并 且 与 服务 器 建立 了 连接 ， 服 务 器 就 可 以 把 数据 推送 到 这 个 socket 上 ， 


的 浏览 器 中 ， 无 须 重新 建立 连接 。 只 要 客户 端 有 一 个 被 打开 的 socket (£ 


服务 器 不 再 需 


要 轮 询 客户 端的 请 求 ， 从 被 动 转 为 主动 。 本 章 将 详细 介绍 在 HTML 5 页 面 中 使 用 Web Sockets 
API 实现 通信 的 方法 ， 并 通过 几 个 具体 实例 来 演示 实现 流程 。 


81 2&3 jWebSocket 服务 器 


为 了 提高 开发 效率 ， 诞 生 了 以 Web Sockets 为 基础 开发 的 jWebSocket 框架 。j WebSocket 


框架 是 一 个 成 熟 的 可 以 用 来 实现 Socket 通信 的 框架 ， 可 以 直接 使 用 它 所 提供 的 服务 器 插件 及 
API 来 开发 强大 的 实现 Socket 通信 的 Web 应 用 程序 。.jWebSocket 服务 器 是 基于 
立 起 来 的 ， 因此 在 运行 jWebSocket 服务 器 时 一 定 要 确保 已 经 安装 了 Java Runtime Environment 


(IRE) 1.6 或 者 更 高 版 本 ， 并 且 设 置 好 Java 一 HOME 环境 变量 # 


Windows 操作 系统 中 , 推荐 在 PATH 环境 变量 中 添加 java.exe 文件 的 所 在 路 径 ， 
安 闭 包 内 提供 的 局 动 jWebSocket 服务 器 时 所 使 用 的 批 处 理 文 件 。 另 外 ， 设 置 JWEBSOCKET 
一 HOME 环境 变量 并 将 其 指向 jWebSocket 的 安装 路 径 。 

安装 jWebSocket 服务 器 的 步骤 如 下 。 

(1) 下 载 jWebSocket 服务 器 安装 包 (jWebSocketServer-< 版 本 号 >.zip) 

该 压缩 文件 中 包括 jWebSocketServer-< 版 本 号 >.jar 文件 ， 所 有 运行 jWebSocket 服务 器 时 


所 必需 的 库 文件 以 及 jWebSocketServer-< 版 本 号 >.bat 批 处 理 文件 。 


+I 


(2) 解压 安装 包 


解压 后 的 路 径 中 包括 jWebSocketServer--WUA 7 H 


根 目 录 ， 在 此 目录 下 包括 如 下 4 个 子 目 录 。 


O conf 子 目录 : 包含 一 个 用 于 对 jWebSocket 服务 器 进行 配置 的 jWebSocket.xml 文件 。 
O Libs 子 目 录 : 包含 jWebSocketServer.jar X4 


纯 Java 技术 建 


将 其 指向 Java 的 安装 路 径 。 在 


否则 需要 调整 


ok, 该 目录 就 是 jWebSocket 服务 器 的 


F 与 所 有 运行 j WebSocket 服务 器 时 所 必需 


的 库 文 件 。 利 用 插件 或 过 滤器 对 jWebSocket 进行 扩展 时 所 需要 的 jar 文件 也 必须 放 在 
这 个 目录 下 。 


口 bin 


昌 时 的 文件 、 启 


Hox: 包含 所 有 的 Windows 可 执行 文件 、 作 为 Windows 服务 被 使 月 


动 jWebSocket 服务 器 时 所 需要 使 用 的 批 处 理 文件 以 及 安装 与 卸载 Windows 的 32 位 或 


64 位 的 服务 时 所 需要 使 用 的 文件 。 


口 Logs H 
(3) 设置 


SocketServer-< 


(4) 在 Windows 操作 系统 中 ， 运 行 bin 
在 bin 目录 中 ， 为 Mac OS X 操作 系统 提供 了 


K: 包含 作为 


JWEBSOCKET 一 HOME 环境 变 
版 本 号 > 目 


录 。 
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三 


EE. 


目录 下 的 批 处 到 


日 志 来 使 用 的 jWebSocket.log 日 志文 件 。 
并 将 其 指向 jWebSocket 的 根 目 录 : jWeb 


EX 


一 个 jWebSocketServer.command 


F jWebSocketServer.bat. 


同时 
各 本 文件 ，; 


为 


` 


ubuntu 操作 系统 提供 了 一 个 jWebSocketServersh 文件 ,如 果 PATH 环境 变量 中 没有 包括 java.exe 


文件 的 所 在 路 径 , 需要 手工 修改 jWebSocketServerbat 这 个 批 处 至 


文件 


(5) 如 果 想 在 所 有 操作 系统 


EE 文件 以 使 其 能 够 找到 java exe 


手动 地 采用 统一 方法 来 启动 jWebSocket 服务 器 ， 在 命令 行 


中 输入 “java -jar bin/jWebSocketServer-<version>.jar” 即 可 启动 服务 器 。 


在 运行 jWebSocket 服务 器 时 ， 可 以 在 命令 行 中 添加 一 个 “-config <jWebSocket 
置 文件 的 路 径 >” 参 数 ， 这 样 可 以 在 该 参数 


手动 指定 运行 jWebSocket 服务 器 时 使 月 


服务 的 配 
的 配置 


文件 及 其 路 径 ， 而 不 使 用 默认 的 配置 文件 。 在 为 了 测试 目的 而 同时 运行 几 个 jWebSocket 服务 


T 


器 并 为 每 个 服务 器 指定 不 同 


的 配置 文件 时 ， 这 个 命令 行 参数 是 十 分 有 用 的 。 


注意 : 其 实在 安装 jWebSocket 服务 器 后 ， 还 是 不 能 使 用 jWebSocket 框架 的 。 为 了 方便 在 
不 同 的 编程 环境 下 开发 jWebSocket 项 目 ， 接 下 来 需要 掌握 在 不 同 开 发 环境 运行 jWebSocket 
服务 器 的 知识 。 至 于 什么 开发 环境 ， 读 者 可 以 根据 自己 的 具体 情况 进行 。 并 且 还 需要 将 
jWebSocket 服务 器 设置 为 Windows 服务 ， 并 且 需 要 在 客户 端 进行 设置 。 因 为 用 户 们 的 操作 系 
统 不 同 ， 开 发 环境 不 同 ， 所 以 在 本 书 中 不 讲解 上 述 相 关内 容 。 


8.2 


实现 跨 文档 传输 数据 


在 JavaScript 脚本 程序 中 , 出 于 对 代码 安全 性 的 考虑 ， 


这 给 不 同 
在 


两 个 不 同 域名 与 端口 上 


互 访 , 需要 调 上 


月 对 象 的 postMessage() 方 法 ， 


LASURR 


otherWindow.postMessage (message,targetOrlgin) 


O otherWindow: Zi 

是 iframe 的 content Window 
口 Message: 表示 所 有 发 送 的 数据 、 
口 targetOrigin: 表示 发 送 数据 的 URL KW, MI 
号 (D)， 则 表示 不 限制 发 送 来 源 ， 指 向 全 部 的 地 址 。 
解 在 网 页 中 实现 跨 文 档 传输 数据 的 方法 。 


如 果 该 值 为 通配符 
下 面 通过 一 个 实例 


PE, 


接收 煞 据 页 面 的 引 上 
或 是 


通过 下 标 返 加 


字符 类 


字符 类 型 ， 也 可 以 是 JSON 对 象 转换 后 的 
限制 otherWindow 对 和 象 的 接收 范围 ， 


月 对 象 ， 可 以 是 window.open 的 返 
的 window.frames 单个 实体 对 


不 允许 跨 域 访问 其 他 页 面 中 的 元 素 ， 
区 域 的 页 面 数据 互 访 带 来 障碍 。 在 HTML 5 中 ， 可 以 利用 对 象 的 postMessage 方法 ， 
的 页 面 之 间 实 现 数据 的 接收 与 发 送 功能 。 
调用 格式 如 下 : 


HH 


要 想 


DN 


实现 跨越 页 面 间 的 数据 


回 


值 ， 也 可 以 
象 。 
内 容 。 


D Hg 


字符 


实例 8-1 说 明 
源码 路 径 daima\8\1.html 
功能 在 网 页 中 实现 跨 文档 传输 数据 
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本 实例 演示 了 使 用 方法 postMessage() 实 现 跨 文档 传输 数据 的 过 程 。 在 本 实例 中 创建 了 一 
个 HTML 5 页 面 ， 并 在 页 面 中 添加 一 个 <iframe> 标 记 作为 子 页 面 。 当 在 主页 面 的 文本 框 中 输 
入 生成 随机 数 的 位 数 ， 并 单 击 “ 请 求 ”按钮 后 ， 子 页 面 将 接收 该 位 数 信息 ， 并 向 主页 面 返回 
根据 该 位 数 生 成 的 随机 数 。 主 页 面 能 够 接收 指定 位 数 的 随机 数 ， 并 将 随机 数 显 示 在 页 面 中 ， 
从 而 完成 在 不 同文 档 间 数据 的 互 访 功能 。 实 例文 件 1.html 的 实现 代码 如 下 。 
<!DOCTYPE html> 
<html> 
<head> 
«meta charset-"utf-8" /> 
«title» H] PostMessage0 实 现 路 文档 传输 数据 </title> 
<link href-"css.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" language-"jscript" 


src="Js1.Js"/> 
</script> 
</head> 
<body onLoad="pageload();"> 
<fieldset> 
<legend> 跨 文档 请 求 数据 </legend> 
<p id="pStatus"></p> 
<input id="txtNum" type="text" class="inputtxt"> 
<input id="btnAdd" type="button" value=" 45 >K" 
class-"inputbtn" onClick-"btnSend Click();"> 
«iframe id="ifrA" src-"Message.html" 
width-"Opx" height-"Opx" frameborder-"0"/— 
</fieldset> 
</body> 
</html> 


CSS 样式 文件 css.css 的 代码 如 下 。 
(@charset "utf-8"; 
/* CSS Document */ 
body í 
font-size: 1 2px 


j 

.inputbtn í 
border:solid 1px #ccc; 
background-color:#eee; 
line-height:18px; 
font-size:12px 

j 

.inputtxt í 


border:solid 1px #ccc; 
line-height:18px; 
font-size:12px; 
padding-left:3px 
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脚本 文件 jsljs 的 代码 如 下 。 
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function pageload() { 
window.addEventListener('message', 
function(event) í 
if (event.origin == strOrigin) í 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML += event.data; 


h 
false); 
j 
/点 击 “ 请 求 ” 按 钮 时 调用 的 函数 
function btnSend Click() í 
/获取 发 送 内 容 
var strTxtValue = $$("txtNum").value; 
if (strTxtValue.length > 0) í 
var targetOrigin — strOrigin; 
$$("ifrA").contentWindow.postMessage(strTxtValue, targetOrigin); 
$$("txtNum").value = ""; 


j 
然后 通过 <iframe> 元 素 的 “src” 属 性 导入 一 个 名 称 为 Message.html 的 子 页 面 ， 功 能 是 接 
收 主页 面 请 求生 成 随机 数 长 度 的 值 ， 并 返回 根据 该 值 生成 的 随机 数 。 文 件 Message.html 的 代 
码 如 下 。 


<!DOCTYPE html> 
<html> 

<head> 

«meta charset-"utf-8" /> 
<title></title> 


<link href="css.css" rel="stylesheet" type="text/css"> 


<script type="text/javascript" language="jscript" 
src="Js162.Js"/> 

</script> 

</head> 

<body onLoad-"PageLoadForMessage();" 

</body> 

</html> 


在 本 实例 的 上 述 代码 中 ， 为 了 接收 页 面 间 传 输 的 数据 ， 主 、 子 页 面 在 页 面 加 载 时 都 为 页 
面 添加 了 message 事件 ， 添 加 方式 如 下 : 


window.addEventListener( 'messagel,function (event) {...},false); 
如 果 在 页 面 中 添加 “message” 事 件 成 功 ， 那 么 通过 方法 postMessage0 I8] 94 H ARGE 
求 时 会 触发 该 事件 ， 并 通过 事件 回调 函数 中 event 对 象 的 “data” 属 性 捕获 发 送 来 的 数据 。 在 
本 实例 中 , 将 捕获 的 数据 event.data 传递 给 另外 一 个 自 定 义 函 数 RetRndNum(O， 此 函数 的 功能 
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是 生成 随机 数 。 另 外 ，event 对 象 中 还 包含 “source” 与 “origin” 属 性 ， 分 别 代表 发 送 数 据 对 
象 与 发 送 来 源 ， 可 以 使 用 “source” 属 性 向 发 送 数据 页 面 返回 数据 ; 同时 , 还 可 以 通过 “origm” 
属性 检测 互通 数据 的 域名 是 否 正确 ， 以 规避 因 域 名 不 正确 产生 的 恶意 代码 来 源 ， 确 保 数 据 交 
互 的 安全 性 。 在 本 实例 中 ， 主 、 子 页 面 通过 “event.origin==strOrigin” 人 代码， 判断 各 自 请 求 来 
源 是 否 为 约定 的 strOrigin 值 。 如 果 是 ， 则 进行 下 面 的 操作 ， 和 否则 不 进行 任何 的 数据 交互 操作 。 
执行 效果 如 图 8-1 所 示 。 


用 Postmessage (0) 实 现 跨 文 档 传 输 煞 据 = Opera = [D| xl 
Çu Opera | Ë FiPostMessage OIER. . + m 
€ > 2 > | XH | localhost/E:/ ~ PABLO 
足 文 档 请 求 数据 
| 请 求 
Doe v e 2 Å = mm 


图 8-1 执行 效果 


8.3 ”使 用 WebSocket 传送 数据 


在 HTML 5 中 ，WebSocket 为 客户 端 与 服务 器 端 搭 起 了 一 座 双 向 通信 的 桥梁 ， 实 现 了 服 
务 器 端的 信息 推送 功能 。 这 座 桥 梁 是 一 个 实时 、 了 永久 性 的 连接 ， 服 务 器 端 一 旦 与 客户 端 建立 
了 这 样 的 双向 连接 ， 就 可 以 将 数据 推送 至 Socket 中 。 而 客户 端 只 要 有 一 个 Socket 绑 定 的 地 址 
和 端口 与 服务 器 建立 联系 ， 就 可 以 接收 推送 来 的 数据 。 


8.3.1 ”使 用 Web Sockets API 的 方法 

使 用 Web Sockets API 的 方法 十 分 简单 ， 基 本 步骤 如 下 : 

(1) 创建 连接 

新 建 一 个 WebSocket 对 象 的 具体 代码 如 下 ;: 

var objns=new WebSocket ("ws://localhost:313 1/test/demo"); 

其 中 ，URL 必须 以 “ws” 字 符 开 头 ， 剩 余部 分 可 以 像 使 用 HTTP 地 址 一 样 来 编写。 该 地 
址 没有 使 用 HTTP， 因 为 它 的 属性 为 WebSocket URL; URL 必须 由 4 个 部 分 组 成 ， 分 别 是 通 
信和 标记 (ws)、 主 机 名 称 (host)、 端 口号 (port) 及 Web Sockets Server. 

(2) 发 送 数 据 

当 WebSocket 对 象 与 服务 器 建立 联系 后 ， 使 用 如 下 代码 发 送 数据 : 


objns.send(dataInfo); 


其 中 ，objns 为 新 创建 的 WebSocket 对 象 ，send0) 方 法 中 的 datalnfo 参数 为 字符 类 型 ， 即 
只 能 使 用 文本 数据 或 者 将 JSON 对 象 转换 成 文本 内 容 的 数据 格式 。 
(3) 接收 数据 


EH 185 


L^? HTML 5 开发 从 入 门 到 精通 
用 于 接收 服务 器 发 送 来 的 数据 ， 代 码 如 下 : 


客户 端 添加 事件 机 制 
objns.onmessage=function( event){ 
alert (event.data) 

} 


pam) 


其 中 ， 通 过 回调 函数 中 event 对 象 的 “data” 属 性 来 获取 服务 器 端 发 送 的 数据 内 容 ， 该 内 
容 可 以 是 一 个 字符 串 或 者 JSON 对 象 。 
(4) 设置 状态 标志 


通过 WebSocket 对 象 的 “readyState” 属 性 记录 连接 过 程 中 的 状态 值 。 属 性 “readyState” 
是 一 个 连接 的 状态 标志 ， 用 于 获取 WebSocket 对 象 在 连接 、 打 开 、 关 闭 中 和 关闭 时 的 状态 。 
8.3.2 ”实战 演练 

下 面 通过 一 个 具体 实例 讲解 在 网 页 中 使 用 WebSocket 传送 数据 的 方法 。 在 本 实例 中 新 建 
了 一 个 HTML 页 面 ， 当 用 户 在 文本 框 中 输入 发 送 内 容 并 单 击 “发 送 ” 按 钮 后 ， 通 过 创建 的 
WebSocket 对 象 将 内 容 发 送 至 服务 器 端 ， 同 时 页 面 接收 服务 器 端 返回 来 的 数据 ， 并 展示 在 页 
面 的 <textarea> 元 素 中 。 


Cu 


实例 8-2 说 — UJ 
源码 路 径 daima\8\2.html 
功能 在 网 页 中 使 用 WebSocket 传送 数据 


实例 文件 2.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title> 使 用 WebSocket 传送 数据 </title> 

<link href="css.css" rel="stylesheet" type="text/css"> 


<script type="text/javascript" language="jscript" 


src="Js2.Js"/> 
</script> 
</head> 
<body onLoad="pageload();"> 
<textarea id="txtaList" cols="26" rows="12" 
readonly="true"></textarea><br> 
<input id="txtMessage" type="text" class="inputtxt"> 
<input id="btnAdd" type="button" value=" /z 3X" 
class="inputbtn" onClick-"btnSend Click();"> 
</body> 
</html> 


编写 脚本 文件 js2.js， 设 置 当 页 面 加 载 onLoad 事件 时 会 调用 自 定 义 函 数 pageload(). Æi% 
函数 中 ， 首 先 根 据 变量 SocketCreated 5 readyState 属性 的 值 ， 检 测 是 否 还 存在 没有 关闭 的 连 
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接 ， 如 果 存 在 ， 则 调用 WebSocket 对 象 的 close0 方 法 关闭 。 然 后 使 用 try 语句 通过 新 创建 的 
WebSocket 对 象 与 服务 器 请 求 连 接 ， 如 果 连 接 成 功 则 将 变量 SocketCreated IEX true, 
执行 catch 部 分 代码 ， 将 错误 显示 在 页 面 的 <textarea> 元 素 中 。 为 了 能 实时 捕捉 与 服务 器 端 连 
接 的 各 种 状态 ， 在 函数 pageload0 中 自 定 义 了 WebSocket 对 象 的 打开 (open)、 接 收 数据 
(message) RANEI (close )、 连 接 出 错 (error) 事件 ,一旦 触发 这 些 事 件 ， 痢 将 获取 的 数 
据 显 示 在 <textarea> 元 素 中 。 当 单 击 “发 送 ” 按 钮 时 ， 先 检测 发 送 的 内 容 是 否 为 空 ， 再 调用 
WebSocket 对 象 的 send() 方 法 ， 将 获取 的 数据 发 送 至 服务 器 端 。 文 件 js2.js 的 代码 如 下 。 
function $$(id) í 
return document.getElementById(id); 


} 


var StrTip = ""; 

var objWs = null; 

var conUrl = "ws://localhost:313 1/test/demo"; 

var SocketCreated = false; 

var arrState = new Array(" 正 在 建立 连接 .…", "连接 成 功 几 ， 

"正在 关闭 连接 .…", "连接 已 关闭 由 ， 
"正在 初始 化 值 …", "连接 出 错 1"); 


/ 自 定义 页 面 加 载 时 函数 
function pageload() í 
if (SocketCreated && (objWs.readyState == 0 || obj Ws.readyState == 1)) í 
obj Ws.close(); 
} else í 
Handle List(arrState[4]); 
try { 
objWs = new WebSocket(conUrl); 
SocketCreated = true; 
} catch(ex) í 
Handle List(ex); 


return; 


j 
j 
/添加 socket 对 象 的 打开 事件 
objWs.onopen = function() í 

Handle List(arrState[objWs.readyState ]); 


J 
/添加 socket 对 接收 服务 器 数据 事件 
objWs.onmessage = function(event) í 
Handle List(" 系 统 消息 :" +event.data); 


} 
/添加 socket 对 象 关闭 开 
objWs.onclose = function() { 
Handle List(arrState[objWs.readyState ]); 


件 


Tai 


inl 


} 
/添加 socket 对 象 的 出 错 事件 


EB 187 


— HTML 5 开发 从 入 门 到 精通 


objWs.onerror = function() { 
Handle List(arrState[5 ]); 


j 
j 


/ 自 定义 点 击 “ 发 送 ”按钮 时 调用 的 函数 
function btnSend ClickO í 
var strTxtMessage = $$("txtMessage").value; 
if (strTxtMessage.length > 0) í 
objWs.send(strTxtMessage); 
Handle List(" 我 说 :" + strTxtMessage); 
$$("txtMessage").value = ""; 


j 
j 


/ 自 定 义 显 示 与 服务 器 交流 内 容 的 函数 
function Handle List(message) í 


strTip += message + "n"; 
$S("txtaList").innerHTML = strTip; 


j 


执行 效果 如 图 8-2 所 示 。 


注意 : 要 想 实现 客户 端 与 服务 


正在 初始 化 值 . . 
连接 已 关闭 |! 


发 送 


图 8-2 执行 效果 


端 进行 一 些 系 统 的 配置 ， 并 使 用 服务 器 端 代码 编写 程序 ， 支 持 客户 端的 请 求 。 


84 处 理 JSON 对 象 


在 HIML 5 网 页 中 ， 
要 借助 JavaScript 中 的 两 个 方法 : 


接收 字符 型 的 数据 ， 因 此 ， 


客户 端 能 够 发 送 与 接收 JSON 对 象 。 但 
JSON.parse 和 JSON.stringify， 前 者 用 于 将 文本 数据 
JSON 对 象 ， 后 者 用 于 将 JSON 对 和 象 转换 成 文本 数据 。 由 于 WebScoket 对 象 的 send() 方 法 只 
在 发 送 时 需要 将 JSON 对 象 转换 成 文本 数据 ， 在 接收 过 程 中 再 ; 


服务 器 推送 的 文本 数据 转换 成 JSON 对 象 。 


下 面 通过 一 个 实例 
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解 在 网 页 中 传送 JSON 对 象 的 方法 


° 


器 端的 连接 并 且 双 方 互通 数据 ， 首 要 条 件 是 需要 在 服务 器 


是 ， 在 发 送 与 接收 过 程 中 需 


Hu 
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实例 8-3 说 HJ 
源码 路 径 daima\8\3.html 
功能 在 网 页 中 传送 JSON 对 象 


本 实例 以 前 面 的 实例 8-2 为 基础 ， 新 添加 了 一 个 <textarea> 元 素 ， 用 于 显示 从 服务 器 接收 
的 在 线 人 员 数 据 。 用 户 输入 发 送 内 容 并 单 击 “ 发 送 ”按钮 后 ， 将 使 用 JSON 对 象 的 形式 向 服 
务 器 端 发 送 输入 的 发 送 内 容 与 时 间 。 实 例文 件 3.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title> 用 WebSocket 传送 对 象 </title> 

<link href="Ccss.css" rel="stylesheet" type="text/css"> 


'jscript" 


is 


«script type-"text/javascript" language 
sre="js3.js"/> 
</script> 
</head> 
<body onLoad="pageload();"> 
<fieldset> 
<legend> 用 JSON 对 象 传输 数据 </legend> 
<div> 
<span><b> 对 话 记 录 </b></span> 
<span class="pl140"> 
<b> 在 线 人 员 </b> 
</span> 
</div> 
<textarea id="txtaList" cols="26" rows="12" 
readonly="true"></textarea> 
<textarea id="txtaUser" cols="10" rows="12" 
readonly="true"></textarea> 
«div class="pl2"> 
«input 1d="txtMessage" type="text" class="inputtxt w176"> 
<input id="btnAdd" type="button" value=" 发 送 " 
class-"inputbtn w85 ml4" onClick-"btnSend Click();"> 
</div> 
</fieldset> 
</body> 
</html> 


编写 脚本 文件 js3.js, 此 文件 与 前 面 实例 8-2 基本 相同 , 但 是 两 段 代码 也 存在 了 明显 差别 ， 
分 别 是 发 送 客户 端 数 据 与 接收 服务 器 推送 来 的 数据 处 理 方式 。 在 本 实例 中 ， 为 了 能 够 向 服务 
器 端 发 送 输入 内 容 与 对 应 时 间 ， 需 要 将 获取 的 内 容 变量 strTxtMessage 与 当前 时 间 
strTime.toLocaleTimeString() 这 两 项 内 容 ， 通 过 调用 JSON.stringify 方法 转 成 文本 数据 ， 再 调用 
send() 方 法 向 服务 器 端 发 送 数 据 。 在 本 实例 的 message 事件 中 ， 为 了 更 好 地 接收 服务 器 端 推送 


| 
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来 的 数据 ， 先 调 月 


function $$(id) í 


元 素 的 方法 ， 将 接收 的 全 部 数据 信息 展示 在 对 应 的 <textarea> 元 素 中 。 文 件 js3.js 


return document.getElementById(id); 


} 


var strList = 


"m. 
E 


var strUser — 


"m. 
, 


var obj Ws = null; 


var conUrl = "ws://localhost:3131/test/SON"; 


var SocketCreated = false; 


var arrState = new Array(" 1E 


在 


E 立 连接 ..…", "连接 成 功 !", "正在 关闭 连接 ..…"， 


// 自 定义 页 面 加 载 时 函数 
function pageload() { 


"连接 已 关闭 "正在 初始 化 值 .% "连接 出 错 !9; 


if (SocketCreated && (objWs.readyState == 0 || obj Ws.readyState == 1)) í 


objWs.close(); 
) else í 


Handle List(arrState[4 ]); 


try { 


objWs = new WebSocket(conUrl); 
SocketCreated — true; 


} catch(ex) í 


Handle List(ex); 


return; 


j 
/添加 socket 对 象 的 打 


E 


TF 


objWs.onopen = function() í 
Handle List(arrState[objWs.readyState ]); 


j 


// 添 加 socket 对 接收 服务 器 数据 事件 


objWs.onmessage = function(event) í 
var objJSON =JSON.parse(event.data); 
for (var intl = 0; intl < objJSON.length; i++) í 
Handle User(objJSON[intI]. UserName); 
Handle User(objJSON([intl ].Stauts); 


j 
/添加 socket 对 象 关闭 


E 


FAF 


objWs.onclose = function() í 
Handle List(arrState[objWs.readyState ]); 


j 
/添加 socket 对 象 的 出 


LE 


objWs.onerror = function() 
Handle List(arrState[5 |); 


E 
1 


H JSON.parse 方法 将 获取 的 event.data 数据 转 成 JSON 对 象 , 再 通过 遍历 对 象 


的 代码 如 下 。 
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j 
// 自 定义 点 击 " 发 送 " 按 钮 时 调用 的 函数 
function btnSend ClickO í 
var strTxtMessage = $$("txtMessage").value; 
/定义 一 个 日 期 型 对 象 
var strTime = new Date(); 
if (strTxtMessage.length > 0) í 
objWs.send(JSON.stringify( í 
content: strTxtMessage, 
datetime: strTime.toLocaleTimeString() 
))); 
Handle List(strTime.toLocaleTimeString()); 
Handle List(" 我 说 :" + strTxtMessage); 
$$("txtMessage").value = ""; 


} 
// 自 定义 显示 对 话 记 录 内 容 的 函数 
function Handle List(message) { 
strList += message + "n"; 
$$("txtaList").innerHTML = strList; 


j 
// 自 定义 显示 在 线 人 员 内 容 的 函数 
function Handle User(message) { 
strUser += message + "n"; 
$$("txtaUser").innerHTML = strUser; 
j 


执行 效果 如 图 8-3 所 示 。 


P2: 


JSON 对 象 传输 数据 
对 话 记录 在 线 人 员 
正在 初始 化 值 .… 
连接 已 关闭 ! 

11:16:04 

我 说 :aa 


[ — — BE 


图 8-3 ”执行 效果 


8.5 jWebSocket 框架 


jWebSocket 是 一 个 安全 、 可 靠 、 快 速 的 纯 Web 的 Java/JavaScript 高 速 双 问 通信 和 解决 方案 。 
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可 以 通过 jWebSocket 创建 基于 HTMLS 的 流 媒体 和 通信 web 应 用 程序 。HTML5 WebSockets 


将 是 一 种 超 高 速 双向 TCP 套 接 字 通信 技术 ， 是 实现 


JavaScript 的 开源 框架 。 本 节 将 详细 讲解 在 HTML5' 


8.5.1 ”使 用 jWebSocketTest 框架 进 和 


通信 


HTML5 上 的 WebSocket 功 


能 的 Java 和 


使 用 jWebSocket 框架 的 基本 知识 。 


jWebSocketTest 包含 jWebSocket Server. jWebSocket Clients 以 及 jWebSocket 和 


FlashBridge。 


体 说 明 如 下 所 示 。 


C] jWebSocket Server: 基于 Java 的 WebSocket 服务 器 ， 用 于 server-to-client (S2C) 客户 
， 和 服务 器 控制 CC2C) client-to-client 客户 端 到 客户 端 


Yig 


a 到 


服务 器 的 流 媒体 解决 方案 


的 通信 。 


口 jWebSocket Clients: 


. . As 
session, timeout È 


客户 端 


ü jWebSocket: 
ü FlashBridge: 
下 面 通 


[a me 


里 机 制 。 无 需 插 件 。 


纯 JavaScript 的 WebSocket 客户 端 


基于 Flash 的 WebSocket 插件 的 跨 浏 览 器 兼容 性 。 


IR 


H 


kas: 


实例 8-4 


诉 双向 所 有 浏览 器 双向 通信 。 
解 在 网 页 中 使 用 jWebSocketTest 框架 进行 通信 的 方法 。 


说 HJ 


， 多 个 子 协 议和 可 选 的 用 户 、 
并 且 现 在 可 以 ) — 其 他 Java. Android 


源码 路 径 


daima\8 


hello world.html 


在 本 


端 建立 一 个 与 jWebSocket 服务 器 之 间 
器 喘 或 同 其 他 所 有 与 J jWebSocket 服务 器 建立 连接 的 客户 端 发 送 六 
通过 同一 个 连接 (客户 端 与 服务 器 端的 连接 ) 向 客户 端 发 送 消息 。 


闭 连接 ， 
实例 
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功能 


实例 中 , 首先 对 利 


在 网 页 中 使 用 


H jWebSocket 框架 进行 Socket 通信 的 客户 端 
信 状 况 进 行 简 要 说 明 。 在 HTML 5 页 面 中 利用 jWebSocket 框架 


jWebSocketTest 框架 进行 通信 


与 服务 


器 端 之 间 的 通 


目的 连接 。 建 立 连接 之 


1% 


Ji, Em n] 


以 向 


否则 任何 一 方 都 可 以 向 另 一 方 发 送 任何 消息 。 


文件 hello world.html 的 实 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset="UTF-8"> 

<title>jWebSocket 示例 </title> 

<style> 

div#msgí 
border: 0px; 
margin:10px Opx 10px 0px; 
padding: 3px; 
background-color: #f0f0f0; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 


现代 码 如 下 。 


进行 Socket 通信 ， 需 要 在 客户 
jWebSocket 服务 
Hl. fH. HRS ass t n] EA 
除非 客户 端 或 服务 器 端 关 
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position:relative; 
height:300px; 
overflow:auto; 
font-size: 14px; 
} 
</style> 
«script type-"text/javascript" src="JWebSocket.js"></script> 
«script type-"text/javascript" src-"samplesPlugIn.js «script 
«script type-"text/javascript" language-" JavaScript" 
var jWebSocketClient; 
var userName; 


function window onload() 


{ 
if( jws.browserSupportsWebSockets() ) { 
jWebSocketClient = new jws.] WebSocketJSONClient(); 
jWebSocketClient.setSamplesCallbacks( ( OnSamplesServerTime:getServerTimeCallback] ); 
document.getElementById("btnConnect").disabled-""; 
j 
else í 
var IMsg = jws.MSG WS NOT SUPPORTED; 
alert( IMsg ); 
j 
j 
function btnConnect click() 
{ 


var IURL = jws.JWS_SERVER_URL; 

userName = document.getElementBylId("userName").value; 

var userPass = document.getElementBylId("userPass").value; 

var msg-document.getElementBylId(" msg"); 

msg.innerHTMIL=" 连 接 到 地 址 : "+IURL +" JF H.EAV" + userName + "V HL P445 5l A5 8 e vr 


var IRes = jWebSocketClient.logon(IURL,userName,userPass, í 
OnOpen: function( aEvent ) í 
msg.innerHTML+="<br/>j WebSocket 连接 已 建立 " ; 


Je 
OnMessage: function( aEvent, aToken ) í 
msg.innerHTML+="<br/>j WebSocket \"" + aToken.type + "V 令 牌 收 到 , 消息 字符 串 为 : 


\""+aEvent.data + "V"" ; 
J 
OnClose: function( aEvent ) { 
msg.innerHTML+="<br/>jWebSocket 连接 被 关闭 ." ; 
document.getElementBylId("btnbroadcastText'").disabled="disabled"; 
document.getElementById("btnDisConnect").disabled-"disabled"; 
document.getElementBylId("btnTestPlugIn").disabled-"disabled"; 
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msg.innerHTML+="<br/>"+]WebSocketClient.resultToString(lRes); 

if(IRes.code- —0) 

1 
document.getElementById("btnbroadcastText").disabled-""; 
document.getElementById("btnDisConnect").disabled-""; 
document.getElementBylId("btnTestPlugIn").disabled—""; 


} 

function btnbroadcastText click() 

{ 
var sendMsg=document.getElementById("sendMsg").value; 
var msg=document.getElementById("msg"); 
msg.innerHTML+="<br/> 广 播 消息 : \""+sendMsgt"\"..."; 
var ]Res = jWebSocketClient.broadcastText("",sendMsg); 
if(IRes.code!-0) 

msg.innerHTML-jWebSocketClient.resultToString( IRes ); 

document.getElementBylId("sendMsg").value-""; 


} 
function btnDisConnect click() 
{ 
if(j WebSocketClient) 
{ 
var msg=document.getElementById("msg"); 
msg.innerHTML+="<br 放 用 户 "+"\"+userNamet+"\ "关闭 连 接 "; 
var IlRes=j WebSocketClient.close(); 
msg.innerHTML+="<br/>"+jWebSocketClient.resultToString( IRes ); 
if(IRes.code- —0) 
1 


document.getElementById("btnbroadcastText").disabled-"disabled"; 
document.getElementById("btnDisConnect").disabled-"disabled"; 
document.getElementBylId("btnTestPlugIn").disabled-"disabled"; 


j 
function btnTestPlugIn click() 
1 
var msg-document.getElementBylId(" msg"); 
msg.innerHTML+="<br> 通 过 WebSockets 获取 服务 器 的 系统 时 间 .…" ; 
var IRes = jWebSocketClient.requestServerTime(); 
/发 生 错 误 时 显示 错误 消息 
if( IRes.code != 0 ) 
msg.innerHTML--"«br/^"-jWebSocketClient.resultToString(1Res); 


j 
function getServerTimeCallback( a Token ) í 
msg.innerHTML+="<br> 服 务 器 的 系统 时 间 :" + aToken.time ; 
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function window onunload() 


1 
if(j WebSocketClient) 
1 
jWebSocketClient.close( (timeout:3000]); 
} 
} 
</script> 


<body onload="window_onload()" onunload="window_onunload()"> 

用 &nbsp; 户 &nbsp;&nbsp; 名 : <input type="text" id="userName"><br/> 

密 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 码 : <input type="text" id="userPass"><br/> 

发 送 消息 : <input type="text" id="sendMsg"><br/> 

«input type="button" id="btnConnect" onclick-"btnConnect click()" value=" 建 立 连 接 " disabled= 
"disabled"> 


<input type="button" id-"btnbroadcastText" onclick-"btnbroadcastText click()" value=" 广 播 消 息 " 
disabled="disabled"> 


<input type="button" id="btnDisConnect" onclick-"btnDisConnect click()" value=" 关 闭 连 接 " 
disabled="disabled"> 


<input type="button" id="btnTestPlugIn" onclick-"btnTestPlugIn click()" value=" 测 试 插件 " disabled= 
"disabled"> 

<div id="msg"> 

</body> 

<html> 


要 在 页 面 中 使 用 jWebSocket 插件 进行 Socket 通信 ， 需 要 在 页 面 中 加 入 对 jWebSocket.js 
文件 或 jWebSocket min.js 的 引用 。 接 下 来 需要 在 页 面 脚本 代码 的 开头 处 定义 两 个 全 局 变量 ， 
其 中 变量 jWebSocketClient 代表 在 jWebSocket 中 使 用 的 一 个 jWebSocketjSONClient 类 的 对 象 ， 
jWebSocketjSONClient 类 的 命名 空间 为 jws。jWebSocketjSONClient 类 提供 了 通过 JSON 协议 
来 建立 和 关闭 客户 端 与 jWebSocket 服务 器 端的 连接 以 及 互相 发 送 消息 的 方法 。 全 局 变量 
userName 则 代表 了 用 户 登 录 到 jWebSocket 服务 器 中 时 所 使 用 的 用 户 名 。 执 行 后 的 效果 如 
图 8-4 所 示 。 


7) jYebSocketzsPM - Nozilla Firefox -|nl xl 

XED RED SEV PLO PEO IAV HMW 

(PMET IRES w. | irevsocket 示 例 x [ems web Socke: | + 
tile: ///z: ñ Q e|[&-s* F 3BIESIIYIESSBIPE 

BP 名 ， ú 

E f3. 

发 送 消息 ， 


~ 
建立 连接 | “广播 消息 | “关闭 连接 | | 测试 插件 


图 8-4 执行 效果 
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8.5.2 ”使 用 jWebSocketTest 开发 一 个 聊天 系统 


下 面 将 通过 一 个 具体 实例 讲解 在 网 页 中 使 用 jWebSocketTest 框架 进行 通信 的 方法 。 在 
本 实例 中 ， 通 过 一 个 利用 jWebSocket 服务 器 创建 简单 聊天 室 的 案例 的 过 程 ， 进 一 步 展 示 


如 何 用 jWebSocket 服务 器 进行 通信 的 客户 端 页 面 。 在 此 页 面 中 有 一 个 聊天 室 ， 用 户 可 以 


在 此 页 面 中 输入 用 户 名 后 单 击 登录 按钮 登录 聊天 服务 器 ,然后 与 其 他 已 登录 聊天 服务 器 的 


Y 


用 户 进行 文字 聊天 。 在 页 面 中 还 显示 一 个 用 户 列表 ， 当 用 户 登 录 或 退出 聊天 室 时 随时 更 新 


本 


用 户 列表 ， 显 示 当 前 登录 到 聊天 室 中 的 所 有 用 户 的 用 户 名 +“@”+ 该 用 户 的 客户 端 ID。 
实例 8-5 说 — UJ 
源码 路 径 daima M chat.html 
功能 在 网 页 中 使 用 jWebSocketTest 框架 进行 通信 


实例 文件 chathtml 的 实现 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<title>jWebSocket 聊天 室 </title> 

<style> 

hl í 

font-family: Arial, Helvetica, sans-serif; 

font-weight: bold; 
font-size: 14pt; 
color: #006bb5; 
background-color: #f0f0f0; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border: 1px solid #f0f0f0; 
padding: 5px 5px 5px 5px; 
margin: 0px 0px 18px 0px; 


} 
div[id^=divContainer|{ 
border: Opx; 
margin:10px Opx 10px Opx; 
padding: 3px; 
background-color: #f0f0f0; 
-moz-border-radius: Spx; 
-webkit-border-radius: Spx; 
} 
div#divLeft{ 
width:85%; 
background-color: #f0f0f0; 
float:left; 
} 
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div#divRightí 
width:15%; 
background-color:white; 
float:right; 
font-weight:bold; 
font-size: 12px; 
J 
div#divchat í 
border: 0px; 
margin:10px Opx 10px 0px; 
padding: 3px; 
background-color: #f0f0f0; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
position:relative; 
height:300px; 
overflow:auto; 
font-size: 12px; 
} 
table#tbDIg í 
font-family: Verdana, Helvetica, sans-serif; 
font-weight: normal; 
font-size: 12px; 
background-color: #f0f0f0; 
} 
tr#trDlg, td#tdDlg í 
background-color: #f0f0f0; 
font-size: 10px; 
j 
textarea í 
font-family: inherit; 
font-size: 1Opt; 
border: 1px solid #444; 
background-color: white; 
width: 1009/6; 


input[type-"button"] í 
font-family: inherit; 
border: 1px solid 7808080; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
margin: 1px; 
color: white; 
background-color: #81a0b5; 
width: 100px; 
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input[type="button"|:hover { 
margin: 1px; 
background-color: #006bb5; 

} 

input[type-"button"]:active { 
margin: 1px; 
font-weight: bold; 
background-color: #006bb5; 

} 

input[type-"button"]:focus í 
margin: 0px; 
font-weight: bold; 
background-color: #006bb5; 

} 

</style> 

</head> 

«script src-"jWebSocket.js" type="text/javascript"></script> 

«script type-"text/javascript" 

var jWebSocketClient; 

var divChat,tbxUsername,tbxMsg,userName; 

var IN-0,0UT-71; 

var SYS=" 系 统 消息 "; 

function window onload() 


{ 

divChat=document. getElementById("divchat"); 

tbxUsername=document.getElementById("tbxUsername"); 

tbxMsg=document.getElementById("tbxMsg"); 

if(jws.browserSupportsWebSockets()) 

{ 
JWebSocketClient = new jws.jWebSocketJSONClient(); 
tbxUsername.focus(); 
tbxUsername.select(); 

} 

else 

{ 
document.getElementByld("btnSend").disabled="disabled"; 
document.getElementById("btnLogin").disabled="disabled"; 
document.getElementById("btnLogout").disabled="disabled"; 
var IMsg = jws.MSG WS NOT SUPPORTED; 
alert( IMsg ); 
log(SYS, IN, IMsg ); 

j 

j 


function log(username,event,string ) í 
var IFlag; 
if(event- -IN) 
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]Flag = "<"; 
else 
]Flag = ">"; 
if('username) 
username = jWebSocketClient.getUsername(); 
/如 果 用 户 没 有 登录 ， 则 设置 username 为 默认 用 户 名 
这 lusername ) 
username = "游客 "; 
divChat.innerHTML+=username + " " +IFlag + " " +string + "<br>"; 
if( divChat.scrollHeight > divChat.clientHeight ) 
divChat.scrollTop — divChat.scrollHeight - divChat.clientHeight; 


j 

function btnLogin onclick() 

{ 
//var IURL = jws.JWS SERVER URL + "/;timeout-360000"; 
var IURL = jws.JWS SERVER URL + "/;,timeout=5000"; 
var clientArray; 
if(tbxUsername.value.trim()- ="") 


1 


alert(" 请 输入 用 户 名 "); 


return; 


} 
log( SYS, OUT, "连接 到 jWebSocket 聊天 服务 器 ， 地 址 为 : "+IURL +".."); 
var IRes-;jWebSocketClient.logon(IURL,tbxUsername.value, "", í 
OnOpen: function(aEvent)( 
log(SYS,IN," 5 jWebSocket 聊天 服务 器 的 连接 已 建立."); 
//var options={}; 


var options=new Object(); 
options.immediate=false; 

options.interval = 3000; 
jWebSocketClient.startK eepAlive(options); 


J 
OnMessage: function( aEvent, aToken ) í 
if(aToken) 
1 
if(aToken.type == "response") 
1 
if(aToken.reqType == "login") 
{ 
if( aToken.code == 0 ) 
{ 
log(SYS, IN, "欢迎 用 户 " + aToken.username+" 进 入 聊天 室 " ); 
JWebSocketClient.getAuthClients( (pool: null! ); 
j 
else 


log(SYS, IN, "登录 失败 ， 错 误 消 息 为 : "+ aToken.msg ); 
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} 
else if(aToken.reqType == "getClients") 
{ 
var divRight=document.getElementById("divRight"); 
divRight.innerHTML=" 用 户 列表 (@ 之 后 的 文字 为 用 户 的 客户 端 id): "s 
for(var i=0;i<aToken.clients.length;i++) 


{ 


divRight.innerHTML+="<br/>"+aToken.clients[i]; 


} 
else if(aToken.type == "goodBye") 


log(SYS,IN,"jWebSocket 聊天 服务 器 断 开 与 客户 端的 连接 (原因 :"+ aToken. 


reason + ")!" ); 
else if(aToken.type == "broadcast") 


i 
if(aToken.data) 
log( aToken.sender,IN,aToken.data); 
j 
else if(aToken.type == "event") 
1 
jWebSocketClient.getAuthClients( (pool: null! ); 
var data-JSON.parse(aEvent.data); 
if(data.name- -"login") 


1 


log(SYS, IN, "欢迎 用 户 " + data.username+" 进 入 聊天 室 " ); 
j 
if(data.name- -"logout") 


1 


log(SYS, IN, "用 户 " + data.username+" 退 出 聊天 室 " ); 


J. 
OnClose:function(aEvent)í 
log(SYS,IN," j jWebSocket 聊天 服务 器 的 连接 已 关闭 ."); 
document.getElementById("btnSend").disabled-"disabled"; 
document.getElementById("btnLogout").disabled-" disabled"; 
jWebSocketClient.stopKeepAlive(); 


} 
J) 
这 1IRes.code==0) 
{ 


userName-tbxUsername.value; 
document.getElementById("btnSend").disabled—""; 
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document.getElementById("btnLogout").disabled=""; 


} 
} 
function btnSend onclick() 
{ 
var msg = tbxMsg.value; 
if(msg.length > 0) 
{ 
log(userName, OUT,msg); 
var IRes = jWebSocketClient.broadcastText('"" msg); 
if(IRes.code!—0) 
log(SYS,OUT,IRes.msg); 
tbxMsg.value-""; 
j 
J 
function btnLogout_onclick() 
1 
var IRes = jWebSocketClient.close(); 
log(SYS, OUT, "用 户 "+userName+" 退 出 聊天 室 : "+ IRes.msg ); 
1f(IRes.code==0) 
{ 
document.getElementById("btnSend").disabled-"disabled"; 
document.getElementById("btnLogout").disabled-"disabled"; 
j 
j 
function window onunload() 
{ 
if(document.getElementById("btnSend").disabled= ="") 
JWebSocketClient.close(); 
} 
</script> 


<body onload="window_onload()" onunload="window onunload()"> 
<hl>jWebSocket 聊天 室 </h1> 
«div id="divContainer1"> 
«table id-"tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%"> 
«tr id="trDlg"> 
«td id-"tdDlg" width="5"> 

用 户 名 : &nbsp; 
<input id="tbxUsername" type="text" value= "游客 "size="20"> 
«input id="btnLogin" type="button" value=" 登 录 " onclick="btnLogin_onclick();"> 
«input id="btnLogout" type="button" value=" 退 出 " onclick-"btnLogout onclick();" 


disabled> 
</td> 
</tr> 
</table> 


</div> 
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<div 1d="divLeft"> 
«div id="divchat"> 


</div> 


<div id="divContainer3"> 
«table id="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%"> 
«tr id="trDlg"> 
<td valign="top" id="tdDlg" nowrap> 对 话 </td> 
«td valign="top" id="tdDlg"><textarea id="tbxMsg" cols="255" rows="2" style= 
"width:100%"></textarea></td> 
<td valign="top" id="tdDlg"><input id="btnSend" type="button" value=" Az35" 
onclick-"btnSend onclick();" disabled></td> 


</tr> 


</table> 


</div> 


</div> 


<div id="divRight"> 


用 户 列表 (@ 之 后 的 文字 为 用 户 的 客户 端 id): 
</div> 

</body> 

</html> 


在 本 实例 中 ， 在 JavaScript 脚本 代码 
客户 端 处 于 非 活 动 状 态 ( 客 户 端 不 
指定 的 timeout 时 间 值 后 ， 服 务 器 端 将 中 止 会 话 ， 将 客户 
， 所 以 通过 指定 超时 
机 制 。 这 样 ， 客 户 端 可 以 通过 主动 发 送 close 令 牌 来 向 服务 器 端 请 


"a 


进行 Socket 
段 时 间 有 
间 的 连接 关闭 。 


话 与 连接 是 一 种 必需 的 管 开 


通信 的 时 候 ， 
该 时 间 超 
因为 服务 器 端 不 能 主动 对 客户 


求 关闭 客户 端 与 
于 网 络 原 因而 与 
BO 的 客户 端 之 | 
制 ， 服 务 器 端的 端 


=l 


If con 
Ii con 


M7, 


向 


的 连 


接 ， 服 务 器 端 也 可 以 在 指定 


端 进行 操作 


的 超 


ze 
=i 


将 很 


ELE 


KRHS CI 
时 机制 是 以 客户 


断 


连接 (没有 


pn 


的 连接 关闭 ， 将 被 这 些 客户 端 占用 的 端 
为 得 不 到 释放 )。 


已 LU 


理 的， 如 果 超 出 超时 时 间 T 


端 是 否 在 指定 时 间 范 转 


闭 连接 。 在 某 些 特殊 场合 下 《〈 例 如， 在 网 页 中 


展示 较 长 篇 幅 


I 


时 时 间 过 去 之 后 ; 
向 服务 器 端 发 出 关闭 连接 请 求 而 被 意外 中 断 连 
释放 。 如 果 没有 这 种 超时 管理 机 


用 到 了 KeepAlive 功能 。 在 使 用 jWebSocket 框架 


服务 器 端 发 出 


任何 请 求 ) 


端 与 服务 器 端 之 


A 
Z 


十 间 来 管理 


fie 


内 与 服务 器 端 进行 交互 操作 为 依据 进行 管 


读 的 状态 中 ， 


和 i 客户 端 没有 向 服务 器 端 发 出 任何 请 求 ， 服 务 器 端 就 结束 会 话 ， 关 
的 文章 或 其 他 流 数 据 时 )， 用 户 在 
较 长 时 间 内 不 再 向 服务 器 端 发 出 任何 请 求 ， 只 是 处 于 对 文章 或 流 数 据 进 行 阅 这 


过 


时 尽管 超出 了 超时 限制 ， 用 户 还 是 希望 服务 器 端 保持 与 客户 端的 连接 。 在 这 种 情况 下 ， 可 以 


Art 4— 


让 客户 


端 每 隔 -一段 时 


服务 器 端 不 会 结束 会 话 ， 不 会 断 
端 根据 这 个 响应 令 牌 来 确 


司 向 服务 器 端 自动 发 送 一 个 ping 令 牌 以 声明 
连接 。 服 务 器 端 


岂可 以 向 客户 


ping 令 牌 来 声明 


[ 1 处 于 


1T 


KeepAlive 功能 


jWebSocketClient. startK eepAlive(options); 


认 服 务 器 端 与 自己 处 于 
活动 状态 的 功能 就 叫 KeepAlive 功能 。 
的 代码 如 下 所 示 。 


Mug 


"fj 


己 处 于 活动 状态 ， 以 确保 
返回 一 个 响应 令 牌 ， 客 户 
连接 状态 。 客 户 亲 每 隔 一 段 时 间 目 动 发 送 


在 上 述 代 码 中 ，jWebSocketClient 为 一 个 jWebSocketjSONClient 类 的 对 象 ， 通 过 该 语句 
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来 启动 一 个 KeepAlive 计时 器 。 该 计时 器 控制 客户 端 每 隔 一 段 时 间 自 动向 服务 器 端 发 送 一 个 
ping 令 牌 。 如 果 执 行 该 语句 时 KeepAlive 计时 器 已 经 启动 ， 则 之 前 启动 的 KeepAlive 计时 器 
被 自动 停止 ， 重新 启动 一 个 新 的 KeepAlive 计时 器 ， 并 且 通 过 options 参数 对 该 计时 器 进行 
初始 化 工作 。 
在 参数 options 中 保存 了 如 下 儿 个 可 选 参数 ,通过 这 些 参 数 可 以 初始 化 KeepAlive 计时 器 。 
口 options.interval: 指定 计时 器 的 时 间 间 隔 , 以 毫秒 为 单位 , 参数 值 为 整数 类 型 的 毫秒 数 。 
口 options.echo: 指定 服务 器 端 是 否 需 要 向 客户 端 返 回响 应 令 牌 ， 参 数值 为 布尔 类 型 True 
或 False。 
口 options.immediate: 指定 执行 该 语句 后 客户 端 是 否 立即 发 送 第 一 个 ping 令 牌 ， 而 不 等 
待 计时 器 的 通知 。 
执行 后 的 效果 如 图 8-5 所 示 。 


jWebSocket 聊 天 室 
mea: 有 qESDGEUED 


用 户 列表 (e 之 后 的 文 宇 
为 用 户 的 客户 甘 ia : 


NS 


图 8-5 执行 效果 
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p 


Geolocation API (地理 位 置 应 用 程序 接口 
信 任 的 Nr 点 。 因 


理 


位 


9 i 


为 这 会 涉及 到 用 户 的 隐私 安全 问题 ， 所 以 当 一 


使 用 Geolocation API 


) 的 功能 是 , 将 用 户 的 当前 地 理 位 置信 


息 共享 给 


EL» 浏览 器 会 


是 示 用 户 是 “允许 ”或 者 “拒绝 ”。 


Geolocation API 实现 定位 处 理 的 方法 。 


04 Geolocation API 介绍 


位 置 。 


在 HTML 5 网 页 应 
TERES 


V 8 HU SC REIR 
这 一 汶 
ik. Tn 


计算 用 户 的 位 置 。 


Geolocation 


Hh, seg 
， 如 果 浏 览 
Geolocation API Jf! 


个 站 点 需要 获取 用 户 的 当前 地 
本 章 将 讲解 在 HIML 5 页 面 中 使 用 


FT —£H Geolocation API， 用 来 获取 用 户 的 地 


HL TENE 
VA asp] PIJ API f. 


在 Geolocation API ! 
址 。 然 后 浏览 器 把 这 些 信息 


度 和 移动 速度 等 。 


文 持 且 设置 有 定位 的 功能 ， 就 可 以 使 用 这 组 API 定位 用 户 的 地 理 
t 了 一 个 可 以 准确 知道 浏览 器 用 户 当前 位 置 的 方法 。 且 


£ 位 置信 县 o 


目前 看 来 浏 


《因为 新 版 本 的 IE 支持 了 i 


该 API 接口 可 以 提供 详细 的 用 户 地 


的 获取 是 通过 收集 用 户 周 


其 位 置 


Z API)， 这 使 得 在 不 久之 后 就 可 
里 位 置信 息 ， 例如 经 纬度 、 光 


青 求 的 网 站 上 被 共享 出 来 。 到 目 


= 


9.1.1. ”对 浏览 器 的 支持 情况 


目前 W3C 地 


里 位 置 API 被 以 下 电脑 浏览 


L] Firefox 3.5+ 
L] Chrome 5.0 
L] Safari 5.0 


W3C 地 理 
口 Android 2.0+ 
L] iPhone 3.0+ 


L] Maemo 


L] Opera 10.607 
L1 Internet Explorer 9.0+ 
位 置 API 


引文 持 : 


还 可 以 被 如 下 的 手机 设备 所 文 持 ; 


L] Opera Mobile 10.1+ 
Q Symbian (S60 3rd & 5th generation) 
L] Blackberry OS 6 


围 的 无 线 热 点 和 用 户 PC Bf] IP Hh 
s 发 送 给 默认 的 位 置 定位 服务 提供 者， 也 就 是 谷歌 位 置 服 务 ， 由 
最 后 用 户 的 位 置信 息 就 在 用 户 i 
还 不 是 HTML 5 规范 的 一 部 分 ， 但 是 W3C 为 其 专门 定制 出 了 一 份 详细 的 规范 。 


它 来 
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9.1.2 ”使 用 API 


在 使 用 地 理 位 置 API 之 前 ， 首 先 要 检测 浏览 器 是 否 支 持 ， 例 如 下 面 的 测试 代码 。 


if (navigator.geolocation) { 
/ 我 们 的 目的 
j 


当然 , 这 个 让 判断 也 能 


用 来 进行 浏览 器 的 判断 操作 , 可 以 区 分 IE 6—8 版 本 浏览 器 与 三 9 


FH 


METOCRORES 


他 新 型 的 浏览 器 。 这 在 用 户 使 用 某 些 CSS 3 属性 时 非常 有 用 ， 检 测 浏览 


` 


CSS3 属性 相对 比较 麻烦 ,当然 也 可 以 在 知道 浏览 器 对 该 CSS3 属性 的 支持 情况 下 检测 浏览 


一 般 来 说 ， 就 是 区 分 区 分 IE6—8 浏览 器 和 


SU 


其 他 浏览 器 ， 这 与 navigator.geolocation 的 检测 是 一 


8. 


通过 这 个 API， 使 用 如 下 两 个 方法 变量 可 以 获取 用 户 的 地 理 


口 getCurrentPosition 


位 置 。 


口 watchPosition 
这 两 个 方法 都 支持 三 个 参数 。 例 如 getCurrentPosition 的 格式 为 : 


navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) 


口 successCallback: 为 方法 成 功 时 的 回调 ， 此 参数 必须 。 
口 errorCallback: 为 方法 失败 时 的 回调 ， 此 参数 可 选 。 
口 option: 为 额外 参数 ， 也 是 可 选 参数 对 象 。option 参数 支持 如 下 三 个 可 选 参数 API: 
€ enableHighAccuracy: 表示 是 否 高 精度 可 用 ， 为 Boolean 类 型 ， 默 认为 false， 如 果 开 
启 ， 响 应 时 间 会 变 慢 ， 同 时 ， 在 手机 设备 上 会 用 掉 更 多 的 流量 。 
€ timeout: 表示 等 待 响应 的 最 大 时 间 ， 默 认 是 0 毫秒 ， 表 示 无 穷 时 间 。 

€ maximumAge: 表示 应 用 程序 的 缓存 时 间 。 单 位 毫秒 ， 默 认 是 0， 意 味 着 

都 是 立即 去 获取 一 个 全 新 的 对 象 内 容 。 

clearWatch 方法 只 接受 一 个 参数 ， 这 个 参数 是 | 


每 次 请 求 


watchPosition 方法 返回 的 watchID 。 


请 注意 两 个 方法 的 差异 。getCurrentPosition 方法 属于 一 次 性 取 用 户 的 地 理 位 置信 息 ， 
而 watchPosition 方法 则 不 停 地 取 用 户 的 地 理 位 置信 息 ， 不 停 地 更 新 用 户 的 位 置信 息 ， 这 


在 开 汽车 的 时 候 实 8 


十 获知 自己 的 位 置 比较 有 用 。watchPosition 方法 可 以 通过 watchPosition 


方法 停 掉 停止 不 断 更 新 用 户 地 理 位 置信 息 )， 方 法 就 是 传递 watchPosition 方法 返回 的 
watchID。 当 用 户 的 位 置 被 返回 的 时 候 ， 会 藏 在 一 个 位 置 对 象 中 ， 该 对 象 包括 一 些 属性 ， 
具体 见 表 9-1。 
表 9-1 属性 说 明 
coords.latitude 纬度 数值 
coords.longitude 经 度数 值 
coords.altitude 参考 椭 球 之 上 的 高 度 
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性 


38[ 


( 续 ) 


精确 度 


coords.accuracy 


高 度 的 精确 度 


coords.altitudeAccuracy 


coords.heading 


设备 正 北 顺 时 针 前 进 的 方位 


coords.speed 


设备 外 部 环境 的 移动 速度 (m/s) 


timestamp 


9.2 ”获取 当前 地 理 位 置 


当 位 置 捕获 到 时 的 时 间 戳 


Æ HTML 5 网 页 中 ,使 用 方法 getCurrentPosition0 可 以 获取 当前 的 地 理 位 置 。 如 果 浏 览 器 


需要 获取 用 户 当 前 的 地 理 
geolocation 属性 ， 并 调用 该 
调用 的 代码 格式 如 下 : 


navigator.geolocation.getCurrent Position( 


S] 


successCallback, 

errorCallback, 
[Options] 

) 


遇 性 中 的 getCurrentPositiont() 方 法 获取 月 


位 置信 息 ， 需 要 通过 API 访问 window.navigator 对 象 中 新 添加 的 


日 户 当前 地 理 


信息 ,其 


EA? FS 


位 置 


(1) 参数 successCallback: 是 一 个 函数 ， 用 
操作 。 该 回调 函数 中 有 一 个 形 参 position, 该 参数 
(2) 参数 errorCallback: 是 一 个 获取 地 开 


m 


于 成 功 获取 用 户 当 前 地 理 
是 一 个 对 象 , 用 于 描述 位 置 的 详细 数据 信 
位 置 失 败 时 回调 的 函数 ,该 函 


位 置信 息 


时 的 回调 


H JUN 


对 象 作 为 形 参 ， 
Q 0: 表示 未 知 错误 信息 。 
口 1: 表示 用 户 拒绝 了 定位 
口 2: 表示 没有 获取 正确 的 
口 3: 表示 获取 位 置 的 操作 


服务 的 1 
地 理 位 置 
超时 。 


信息 


" 
Uo 


根据 该 对 象 的 “code” 属 性 获取 定位 失败 的 原 


因 。 该 属性 包 


在 error 对 象 中 ， 除 了 属性 “code” 表 示 出 错 数字 外 ， 还 可 以 通过 属性 “ 
错 的 详细 文字 信息 。 该 属性 是 一 个 字符 串 ， 包 含 与 “code” 属 性 值 相对 应 的 


(3) 参数 Options: 这 是 一 个 可 选择 的 对 象 ， 设 置 后 可 以 为 对 象 添加 一 些 
解 在 网 页 中 获取 当前 地 理 位 置 的 方法 。 


下 面 通过 一 个 实例 


=I 


DNO 


数 中 通过 一 个 error 


括 如 下 4 个 值 : 


message” 获 取出 
错误 说 明 信 息 。 
FE 内 容 。 


= 


t 


实例 971 说 — UJ 
源码 路 径 daima\9\1.html 
功能 在 网 页 中 获取 当前 地 理 位 置 
在 本 实例 中 ， 当 使 用 方法 getCurrentPosition 获取 当前 用 户 的 浏览 器 地 理 位 置信 息 时 ， 在 
弹出 的 是 否 共享 窗口 中 ， 如 果 用 户 选 择 了 “拒绝 ”， 则 将 捕获 的 错误 信息 通过 回调 函数 
errorCallbackO 中 的 errorcode 与 errormessage 显示 在 页 面 中 。 实 例文 件 1.html 的 实现 代码 如 下 。 
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<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title> 用 getCurrentPosition 获取 出 错 信息 </title> 
<link href-"css.css" rel="stylesheet" type="text/css"> 


'jscript" 


<script type="text/javascript" language: 
sre="js1.js"> 
</script> 


<script type="text/javascript" language="jscript" 
src="http://maps.google.com/maps/api/Js?sensor=false"/> 
</script> 
</head> 
<body onLoad="pageload();"> 
<p id="pStatus"></p> 
</body> 
</html> 


脚本 文件 js1.js 的 代码 如 下 。 


在 上 述 代码 中 ， 如 果 浏 览 器 第 一 次 i 


器 会 询问 
地 理 位 置 


function $$(id) í 

return document.getElementByld(id); 
} 
/上 自 定义 页 面 加 载 时 调用 的 函数 
function pageload() í 


if (navigator.geolocation) í 
navigator.geolocation.getCurrentPosition(function(ObjPos) í 
Status_Handle(" 获 取 成 功 !"); 
J. 
function(objError) í 
Status Handle(objError.code + ":" + objError.message); 


J 

1 
maximumA ge: 3 * 1000 * 60, 
timeout: 3000 

J) 


} 

/ 自 定义 显示 执行 过 程 中 状态 的 函数 

function Status Handle(message) í 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML = message; 


j 


tt 


数据 ， 只 有 当 用 户 允 许 共享 地 理 


周 用 getCurrentPosition0 方 法 ， 出 于 安全 的 考虑 ， 浏 览 


j 户 是 否 共享 位 置 数据 信息 。 如 果 用 户 拒绝 则 该 方法 将 出 现 错误 ， 无 法 获取 用 户 的 


位 置 时 ， 方 法 getCurrentPosition() JH 


生效。 执行 效 
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果 如 图 9-1 所 示 。 


l:User denied Geolocation 


图 9-1 执行 效果 


目前 , 各 浏览 器 厂商 对 该 Geolocation API 的 支持 情况 不 完全 相同 , 因此 在 调用 getCurrent 
Position0) 方 法 之 前 ， 需 要 先 用 方法 navigator.geolocation0 检 测 当 前 浏览 器 是 否 支持 定位 功能 ， 
然后 才 开 始 调 用 方法 getCurrentPosition0 获 取 用 户 地 理 位 置信 息 。 当 在 使 用 方法 getCurrent 
Position0 获 取 当 前 浏览 器 地 理 位 置信 息 时 ， 用 户 允 许 了 位 置 共 享 ， 并 且 浏 览 器 也 文 持 定位 功 
能 ， 那 么 该 方法 就 可 以 正确 地 获取 当前 地 理 位 置 数据 。 

在 使 用 getCurrentPosition() 方 法 时 ， 如 果 获 取 位 置 成 功 ， 则 回调 successCallbackO 函 数 。 
该 函数 通过 一 个 对 象 参 数 position 返回 所 有 的 地 理 位 置 详 细 数 据 信息 , 这 些 信息 以 对 和 象 的 属性 
形式 进行 展示 。position 对 象 包含 两 个 重要 的 属性 ， 分 别 为 “timestamp” 和 “coords”， 其 中 
属性 “timestamp” 表 示 获 取 地 理 位 置 时 的 时 间 ， 而 属性 “coords” 则 包含 多 个 值 。 


注意 ; 地 理 位 置 属 于 用 户 的 隐私 信息 之 一 ， 因 此 浏览 器 是 不 会 直接 把 用 户 的 地 理 位 置信 
息 呈 现 出 来 的 ， 当 需要 获取 用 户 地 理 位 置信 息 的 时 候 ， 浏 览 器 会 询问 用 户 ， 是 否 愿 意 透 露 自 
己 的 地 理 位 置信 息 GONE) 如 图 9-2 所 示 。 


$20 El http://www.zhangxinxu.com/study/201106/geolocation-get-position.html 


x 


www.zhangxinxu.com 希望 知道 您 的 方位 。 


www.zhangxinxu.com 圭 要 跟踪 您 的 物理 位 置 。 


允许 一 次 (A) 用 于 此 站 点 的 选项 (O) v 


图 9-2 设置 截图 


如 果 选 择 不 共享 ， 则 浏览 器 不 会 做 任何 事情 。 如 果 不 小 心 对 某 个 站 点 共享 了 地 理 位 置 ， 
可 以 随时 将 其 取消 ， 具 体 方 法 如 下 。 

CD 对 于 IE9 浏览 器 来 说 ， 依 次 选择 “Internet 选项 ”一 “隐私 ”一 “位 置 (清除 站 点 )”， 
如 图 9-3 所 示 。 
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Internet 选项 


常规 | 安全 | 隐私 [me | 连接 | 程序 | 高 级 
设置 
选择 Internet 区 域 设置 。 

中 


阻 ALERTS Coo 
EISE n in ndexkkames 


E 
— d 


hae) 5 SAG. 车 高 级 60 | 点 认 值 0) 
D 
从 不 允许 网 站 清 求 您 的 物理 位 置 中 (E D» 
弹出 窗口 阻止 程序 
g 启用 弹出 窗口 阻止 程序 @) 。 xu po 
图 9-3 下 浏览 器 


(2) 对 于 FireFox 浏览 器 来 说 ， 依 次 单 击 地 址 栏 前 面 的 “网 站 小 图 标 ” 一 “更 多 信息 ”一 
“权限 ”一 “共享 方位 信息 ”一 “阻止 ?” 具体 步 又 如 图 9-4 所 示 。 


© tř 阻止 


允许 @ 阻止 


图 允许 在 当前 会 活 中 人 允许 阻止 


m 


fi © 


图 9-4 FireFox 浏览 器 


如 果 是 Chrome 浏览 器 ， 则 直接 单 击 地 址 栏 右边 的 小 图 标 ， 就 会 看 到 可 以 取消 地 理 位 置 
的 选 框 了 。 如 图 9-5 所 示 。 


OW 


图 9-5 Chrome 浏览 


03 使 用 getCurrentPosition)757; 


fr HTML 5 网 页 应 用 中 ， 使 用 getCurrentPosition(0) 方 法 也 可 以 获取 地 理 位 置信 息 。 
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到 精通 


下 面 通过 一 个 实例 讲解 使 用 getCurrentPosition0) 方 法 获取 地 理 位 置信 息 的 方法 。 


实例 9-2 说 明 
源码 路 径 daima\9\2.html 
功能 使 用 getCurrentPosition() 方 法 获取 地 理 位 置信 息 


在 本 实例 的 HTML 页 面 中 ， 调 用 方法 getCurrentPosition() 成 功 获取 当前 浏览 器 的 地 理 


TH 


位 


<!DOCTYPE html> 
<html> 
<head> 


«meta charset-"utf-8" /> 
«title H] getCurrentPosition 获取 地 理 位 置 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> 


<script type="text/javascript" language="jscript" 


src="Js2.Js"/> 


</script> 


置 ， 并 将 获取 的 位 置信 息 展 示 在 页 面 的 <p> 元 素 中 。 实 例文 件 2.html 的 实现 代码 如 下 。 


«script type-"text/javascript" language-"jscript" 


src-"http://maps.google.com/maps/api/js?sensor-false"/7 


</script> 
</head> 


<body onLoad="pageload();"> 
<p id="pStatus"></p> 


</body> 
</html> 


编写 脚本 文件 js2js， 当 使 月 


方法 getCurrentPosition0 成 功 获 取 地 理 位 置 数据 后 ， 可 以 
调 函 数 successCallback0。 解 析 对 象 参数 objPos， 如 果 需 要 展示 获取 时 


H 


司 ， 则 调用 该 对 象 的 


= 


“timestamp” 属 性。 如 果 需 要 
文件 js2.js 的 代码 如 下 。 
function $$(id) í 


展示 地 型 


LE 位 置 数据 ， 则 通过 对 象 的 “coords” 各 个 属性 值 来 显示 。 


return document.getElementById(id); 


j 


var objNav = null; 
var strHTML = ""; 
function pageload() í 

if (objNav == null) 


1 


objNav = window.navigator; 


j 
if (objNav != null) 


{ 


var objGeoLoc = objNav.geolocation; 


if (objGeoLoc 


!= null) í 


objGeoLoc.getCurrentPosition(function(objPos) í 


var objCrd = objPos.coords; 
strHTML += "纬度 值 : <b>" + objCrd.latitude + "</b><br>"; 
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strHTML += "精准 度 : <b>" + objCrd.accuracy + "</b><br>"; 
strHTML += "精度 值 : <b>" + objCrd.longitude + "</b><br>"; 
strHTML += "bJ [E]: <b>" + objPos.timestamp + "</b><br>"; 

var objAdd = objPos.address; 

strHTML -4—"------------------------------ <br>"; 

strHTML += "国家 : <b>" + objAdd.country + "</b><br>"; 
strHTML += "省 份 : <b>" + objAdd.region + "</b><br>"; 
strHTML += "城市 : <b>" + objAdd.city + "</b><br>"; 
Status Handle(strHTML); 


J. 
function(objError) í 
Status Handle(objError.code + ":" + objError.message); 


J. 

{ 
maximumAge: 3 * 1000 * 60, 
timeout: 3000 

J) 


} 

} 

// 自 定义 显示 执行 过 程 中 状态 的 函数 

function Status Handle(message) { 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML = message; 


] 
因为 各 浏览 器 对 Geolocation API 支持 的 情况 不 同 ， 所 以 同一 代码 在 两 个 不 同 浏览 器 中 执 
行 会 返回 的 结果 会 出 现 一 些 偏差 或 对 某 些 属性 不 支持 ， 如 Firefox 5.0 中 文 持 显示 地 理 位 置 所 
在 的 国家 、 省 份 、 城 市 等 信息 ， 而 Chrome 10 浏览 器 则 不 支持 。 

此 外 ， 如 果 需 要 持续 监测 当前 的 地 理 位 置 ， 可 以 调用 以 下 方法 : 


var intWatchID-navigator.geolocation.watchCurrentPosition(successCallback, errorCallback, [Options]) 


I 


其 中 的 参数 与 getCurrentPosition0) 方 法 一 样 ， 但 该 方法 还 返回 一 个 “intWatchID” 值 ， 用 
于 停止 持续 监测 的 操作 。 如 果 和 需要 停止 持续 监测 ， 则 调用 如 下 方法 : 


clearWatch (intWatchID) 


此 方法 通过 清除 持续 监测 时 返回 的 intWatchID 值 ， 实 现 停 止 持 续 监 测 的 功能 。 


04 在 网 页 中 使 用 地 图 


在 本 章 前 面 的 内 容 中 , 详细 介绍 了 使 用 方法 getCurrentPosition0 获 取 用 户 地 理 位 置信 息 的 
过 程 。 其 实 完全 可 以 通过 使 用 Google 地 图 中 的 Google Map API， 将 获取 的 位 置信 息 标记 在 地 
图 中 ， 从 而 实现 在 Google 地 图 中 锁定 位 置 的 功能 。 
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94.1 在 网 页 中 调用 


地 图 


下 面 通过 一 个 实例 i 


解 在 HTML 5 网 页 中 使 用 地 图 的 方法 。 在 本 实例 的 HTML 页 面 中 ， 


通过 <div> 元 素 显 示 一 幅 Google 地 图 ， 并 将 Google Map API 中 的 对 象 与 getCurrentPosition() 
方法 相 结 合 ， 在 地 图 中 标注 当前 地 理 位 置 ， 当 该 位 置 发 生变 化 时 ， 地 图 中 的 标注 信息 也 随 之 
发 生变 化 。 
实例 9-3 说 — UJ 
源码 路 径 daima\9\3.html 
功能 在 HTML 5 网 页 中 使 用 地 图 


实例 文件 3.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 


<html> 


<head> 


<meta charset="utf-8" /> 


<title> 使 用 


Google 地 图 </title> 


<link href-"css.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" language="jscript" 


sre="js3.js"/> 


</script> 


<script type="text/javascript" language="jscript" 


src="http://maps.google.com/maps/api/Js?sensor=false"/> 


</script> 
</head> 


<body onLoad="pageload();"> 
<div id="divMap"></div> 


</body> 
</html> 


素 导 入 对 应 的 脚本 文件 ， 


过 getCurrentPosition() 方 法 获取 经 度 与 纬度 ， 


function $$(id) í 


置 为 页 面 打 开 时 Google 地 图 的 中 心 点 ; 同时 
元 素 绑 定 ， 将 地 图 显示 在 页 面 中 。 最 后 在 地 图 
窗口 objInf 中 设 定 标记 在 地 图 

开 带 有 注释 中 文 的 标记 窗口 。 文 件 js3js 的 


中 显示 的 注释 中 文 ， 通 过 调 


中 


尺码 如 下 。 


return document. getElementById(id); 


} 


var objNav = null; 
var strHTML = ""; 
// 自 定义 页 面 加 载 
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时 调用 的 函数 


创建 一 个 地 图 


SEPTA 


^ Es latlng, 


编写 脚本 文件 js3.js， 为 了 能 够 使 用 Google 地 图 及 Google Map API， 需 要 使 用 <scrip 人 > 元 
文件 的 URL 为 “http://maps.google.com/maps/api/js?sensor=false”。 通 


并 将 该 中 心 点 设 
各 设置 好 的 地 图 与 页 面 中 ID 号 为 “divMap” 的 
创建 一 个 锁定 标记 objMrk， 并 在 创建 的 标记 


地 图 的 open0 方 法 ， 在 地 图 中 打 
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function pageload() í 
if (objNav == null) í 
objNav = window.navigator; 
} 
if (objNav != null) í 
var objGeoLoc = objNav.geolocation; 
if (objGeoLoc != null) í 
objGeoLoc.getCurrentPosition(function(objPos) í 
var objCrd = objPos.coords; 
var lat — objCrd.latitude; 
var Ing = objCrd.longitude; 
/根据 获取 的 经 度 与 纬度 创建 一 个 地 图 中 心 坐 标 
var latlng = new google.maps.LatLng(lat, Ing); 
/将 中 心 点 设置 为 页 面 打 开 时 google 地 图 的 中 心 点 
var objOpt = í 


zoom: 16, 

center: latlng, 

mapTypeld: google.maps.MapTypeld.ROADMAP 
h 
// 创 建 地 图 ， 并 与 页 面 中 ID 号 为 "divMap" 的 元 素 相 绑 定 
var objMap = new google.maps.Map($$("divMap"), objOpt); 
/创建 一 个 地 图 标记 
var objMrk = new google.maps.Marker( í 


position: latlng, 
map: objMap 


/创建 一 个 地 图 标记 窗口 并 设置 注释 内 容 
var objInf= new google.maps.InfoWindow( í 


x 


content: "我 在 这 里 " 


D 
// 在 地 图 中 打开 标记 窗口 
objInf.open(objMap, objMrk); 


J. 
function(objError) í 
Status Handle(objError.code + ":" + objError.message); 


J 

{ 
maximumAge: 3 * 1000 * 60, 
timeout: 3000 

D 


j 


执行 效果 如 图 9-6 所 示 。 
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fHTHLS/HTMLY6GÜ/daima/169/169.htm1 
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ap 地 图 数据 ©2012 GS(2011)6020 Google, Mapabc - 使 用 条 款 


图 9-6 执行 效果 


9.4.2 ”在 地 图 中 显示 当前 的 位 置 


fE HTML 5 网 页 中 ， 可 以 先 在 页 面 中 制作 一 幅 地 图 ， 然 后 在 页 面 中 显示 用 户 计算 机 或 移 


动 设备 所 在 地 的 地 图 。 在 浏览 器 中 打开 案例 页 面 时 ， 浏 览 器 会 询问 用 户 


是 否 共享 用 户 计算 机 


或 移动 设备 的 地 理 位 置信 息 。 在 不 支持 Geolocation API 的 浏览 嚣 中， 打开 浏览 器 时 会 显示 错 


误 提 示 信 息 。 在 支持 Geolocation API 的 浏览 器 中 ， 当 浏览 器 询问 用 户 是 否 共享 用 户 计算 机 或 
移动 设备 的 地 理 位 置信 息 时 ， 选 择 共 享 地 理 位 置信 息 后 ， 在 浏览 器 中 将 会 显示 用 户 计算 机 或 


移动 设备 所 在 地 的 地 网 。 
下 面 将 通过 一 个 实例 讲解 在 网 页 地 图 中 显示 当前 的 位 置 的 方法 。 
实例 9-4 说 明 
源码 路 径 daima\9\4.html 
功能 在 网 页 地 图 中 显示 当前 的 位 置 


在 本 实例 页 面 中 ， 用 户 单 击 监视 位 置 更 改 按钮 后 ， 浏 览 器 将 会 对 用 


户 的 计算 机 或 移动 设 
立 置 是 否 发 生 改 变 。 


备 所 在 地 进行 监视 ， 每 隔 一 段 时 间 检 查 用 户 的 计算 机 或 移动 设备 的 地 理 


如 果 当 前 计算 机 或 移动 设备 的 地 理 位 置 发 生 改变 则 更 新 页 面 中 的 地 图 。 
钮 后 会 取消 该 监视 。 实 例文 件 4html 的 实现 代码 如 下 。 


<!DOCTYPE html> 

<head> 

«meta name-'"viewport" content-"width-620" /> 
«title» Geolocation API 示例 </title> 

«script type-"text/javascript" 


214 EEE 
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var streetNumber,street,city,province,country; 
var WatchId; 
function window onloadO í 

if(navigator.geolocation- -null) 

alert(" 您 的 浏览 器 不 支持 Geolocation API"); 

else 
navigator.geolocation.getCurrentPosition(showMap,onError, {timeout:60000,enableHighAccuracy:true}); 
} 
function watchPosition() { 

watchld=navigator.geolocation.watchPosition(showMap); 


} 
function clearWatch() 
1 
navigator.geolocation.clearWatch(watchld); 
} 
function showMap(position) 
{ 
var coords = position.coords; 
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); 
var myOptions = í 
zoom: 18, 
center: latlng, 
mapTypeld: google.maps.MapTypeld.ROADMAP 
5 
var mapl= new google.maps.Map(document.getElementById(" map"), myOptions); 
var marker = new google.maps.Marker(( 
position: latlng, 
map: mapl 
J) 
var infowindow = new google.maps.InfoWindow( í 
content: "当前 位 置 !" 
J) 
infowindow.open(map1, marker); 
} 
function onError(error) 
{ 


var message = ""; 
switch (error.code) í 
case error.PERMISSION DENIED: 
message = "位 置 服务 被 拒绝 "; 
break; 
case error.POSITION UNAVAILABLE: 
message = "未 能 获取 到 位 置信 息 "; 
break; 
case error.PERMISSION DENIED TIMEOUT: 
message = "在 规定 时 间 内 未 能 获取 到 位 置信 息 "; 
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break; 

} 
if (message == "") 
{ 

var strErrorCode = error.code.toStrine(); 

message = "由 于 不 明 原 因 ， 未 能 获取 到 位 置信 息 〈 错 误 号 : "+strErrorCode+")."; 
} 
alert(message); 


document. getElementById("watchPosition").disabled="disabled"; 
document. getElementById("clearWatch").disabled="disabled"; 
j 
</script> 
«script type="text/javascript" src=http://maps.google.com/maps/api/js?sensor=false></script> 
</head> 
<body onload="window_onload() "> 
<input type="button" id="watchPosition" value=" 监 视 位 置 更 改 " onclick="watchPosition()"/> 
«input type="button" id="clearWatch" value-" f 1E Wi t" onclick-"clearWatch"/ 
«div id-"map" style-"width:500px; height:460px"></div> 
</body> 
</html> 


执行 效果 如 图 9-7 所 示 。 


监视 位 置 更 改 


当前 位 置 ! 


印 
中 国 邮 政 中 国 邮 政 直 
p jg 储 若 银行 ATM Y 时 复 营销 中 心 
上 
E EST: 经 二 路 “济南 邮政 局 
B 邮电 支局 要 
信用 担保 
中 心太 
; 
| 局 济南 邮政 局 
GO le TERRE ES 62012 GS(2011)6020 Mapabc - ££ Eš 


图 9-7 执行 效果 


9.4.3 ”在 网 页 中 居中 显示 定位 地 图 
本 实例 只 是 以 前 面 的 实例 为 基础 进行 了 简单 的 修改 ， 将 地 图 在 网 页 的 中 间 位 置 显示 。 下 
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H 
H 


面 通过 一 个 实例 讲解 在 网 页 中 居中 显示 定位 地 图 的 方法 。 


实例 9-5 说 BJ 
源码 路 径 daima\9\5.html 
功能 在 网 页 中 居中 显示 定位 地 图 


实例 文件 5.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 
<meta charset="utf-8" /> 


<head> 


«meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, 
maximum-scale=1.0"/> 


<meta name="apple-mobile-web-app-capable" content="yes" /> 


«meta name="apple-mobile-web-app-status-bar-style" content="black" /> 


<title>GeoGoogleMapTest</title> 
<script src="http://maps.google.com/maps/api/js?sensor=true"></script> 


<script> 
if(navigator.geolocation) í 


function hasPosition(position) { 
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 


myOptions = í 
zoom: 15, 
center: point, 
mapTypeld: google.maps.MapTypeId.ROADMAP 


) 


mapDiv = document.getElementById("mapDiv"), 
map = new google.maps.Map(mapDiv, myOptions), 


marker = new google.maps.Marker( í 
position: point, 
map: map, 
title: "You are here" 


J5 
} 
function positionError(error) 
{ 
// 做 错误 处 理 
} 


/mavigator.geolocation.getCurrentPosition(hasPosition); 
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navigator.geolocation.getCurrentPosition(hasPosition, positionError, { enableHigh Accuracy: 
true j); 
} 
</script> 
<style> 
#mapDiv í 
width:320px; 
height:460px; 
border:1px solid #efefef; 
margin:auto; 
-moz-box-shadow:5px 5px 10px #000; 
-webkit-box-shadow:5px 5px 10px #000; 
J 
</style> 
</head> 
<body> 
«div id="mapDiv"></div> 


</body> 
</html> 


执行 效果 如 图 9-8 所 示 。 


€ a ftile:///zE:/ Q e |a- s= P| e: + r=] MM 


f] mane 地 图 | 卫星 


URL 


[IL 一 济南 站 2 
iB + 车 站 - 占 济南 s 
9 T 


mam E 
山 


TER 


a 济南 宾馆 
(qui n 
G OC jale 


nmts- taat 


图 9-8 执行 效果 
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9.4. ”利用 百度 地 图 实现 定位 处 理 
下 面 通 过 一 个 实例 讲解 在 HTML 5 网 页 中 利用 百度 地 图 实现 定位 的 方法 。 


实例 9-6 说 HJ 
源码 路 径 daima\9\6.html 
功能 在 HTML 5 网 页 中 利用 百度 地 图 实现 定位 


实例 文件 6.html 的 具体 实现 代码 如 下 。 


<!DOCTYPE HTML> 

<html> 

<head> 

«meta charset-'utf-8' 

<title> 百 度 地 图 </title> 

«script type='text/javascript' src='http://api.map.baidu.com/api?v=1.3'></script> 


«script type='text/javascript'> 


function getLocation() 
{ 
if(navigator.geolocation){ 
navigator.geolocation.getCurrentPosition(showMap, handleError, (enableHighAccuracy:true, 
maximumA ge:1000]); 
yelse { 
alert( 您 的 浏览 器 不 支持 使 用 HTML 5 来 获取 地 理 位 置 服务 '); 


} 
} 
function showMap(value) 
1 
var longitude — value.coords.longitude; 
var latitude — value.coords.latitude; 
var map = new BMap.Map('map); 
var point = new BMap.Point(longitude, latitude); / 创建 点 坐标 
map.centerAndZoom(point, 15); 
var marker = new BMap.Marker(new BMap.Point(longitude, latitude); // 创建 标注 
map.addOverlay(marker); / 将 标注 添加 到 地 图 中 
j 
function handleError(value) 
1 
switch(value.code)( 
case 1: 
alert(' 位 置 服务 被 拒绝 "); 
break; 
case 2: 


alert(' 暂 时 获取 不 到 位 置信 息 ); 
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执行 效果 如 图 9-9 所 示 。 


"o tek 


Br 
l i 
图 9-9 执行 效果 
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05 在 弹出 框 中 显示 定位 信息 


下 面 通 过 一 个 实例 讲解 在 网 页 的 弹出 对 话 框 中 显示 定位 信息 的 方法 。 本 实例 比较 简单， 
是 基于 前 面 儿 个 实例 为 基础 的 ， 功 能 是 在 弹出 窗口 中 显示 定位 信息 。 


实例 9-7 说 明 
源码 路 径 daima 9 V7.html 
功能 TE HTML 5 网 页 的 弹出 对 话 框 中 显示 定位 信息 


实例 文件 7.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 


<head> 

«meta http-equiv="Content-Type" content-"text/html; charset=utf-8" /> 
<title> 无 标题 文档 </title> 

«script type="text/javascript" language="jscript" > 


function initLocation() { 
// 预 定义 
if (window.google && google.gears) í 
return; 


var factory — null; 


// Firefox 浏览 器 
if (typeof GearsFactory != 'undefined') í 
factory = new GearsFactory(); 
yelse í 
// TE 览 器 
try { 
factory = new ActiveXObject('Gears.Factory"); 
// privateSetGlobalObject is only required and supported on IE 
Mobile on 
// WinCE 览 器 
if (factory.getBuildInfo().indexOf('ie mobile") != -1) í 
factory.privateSetGlobalObject(this); 
} 
} catch (e) í 
// Safari 览 器 
if ((typeof navigator.mimeTypes != 'undefined') && navigator. 
mimeTypes|["application/x-googlegears"]) í 
factory — document.createElement("object"); 
factory.style.display — "none"; 


factory.width = 0; 
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factory.height = 0; 
factory.type = " 
document.documentElement.appendChild(factory); 

if(factory && (typeof factory.create == 'undefined')) í 


application/x-googlegears"; 


// If NP_Initialize() returns an error, factory will still be 


created. 
/ 确保 这 种 情况 下 不 会 出 现 齿轮 效果 
/初始 化 . 
factory = null; 


j 


/* 如 果 没 有 安装 齿轮 ,不 要 定义 任何 对 象 
if (!factory) í 
return; 


// 现 已 建立 对 象 ， 小 心 不 要 覆盖 任何 东西 。 
/注意 : E E 窗口 移动 ， 你 不 能 添加 属性 窗口 对 象 。 
/然而 ， 全 局 对 象 会 自动 添加 属性 窗口 对 象 在 所 有 浏览 器 。 
if ('window.google) í 

google = {}; 


if (!'google.gears) í 
google.gears = (factory: factory; 


j 

h 

function getGeoLocation(okCallback,errorCallback) ( 
initLocation(); 
try 1 


if(navigator.geolocation) í 
geo = navigator.geolocation; 
) else í 
geo — google.gears.factory.create('beta.geolocation'); 
} 
jcatch(e)() 


if (geo) { 


//watch 会 触发 多 次 ， 以 便 随 时 监控 ip 改变 ，iphone 在 
用 两 次 ， 屏 幕 旋转 和 解锁 也 会 调用 ， 汗 。。。 


//navigator.geolocation.watchPosition(successCallback, 


errorCallback, options); 
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geo.getCurrentPosition(okCallback , errorCallback); 
) else í 
alert(" 不 好 意思 ， 你 不 让 我 定位 ! 由 


j 
} 
function okCallback(d){ 
alert(' 当 前 位 置 (纬度 ， 经 度 ):'+ d.latitude +' + d.longitude); 
/iphone 
if(d.coords) 
alert(' 当 前 位 置 (纬度 ， 经 度 ): ' + d.coords.latitude + ',' + d.coords. 
longitude); 
if(d.gearsAddress) 
alert(d.gearsAddress.city); 
5 
function errorCallback(err) 
alert(err.message); 
5 
</script> 
</head> 
<body> 
获取 当前 的 定位 信息 
«input onclick-"getGeoLocation(okCallback,errorCallback)" type="button" value=" 获 取 "> 
</body> 
</html> 


i 


显示 当前 的 定位 


执行 后 的 效果 如 图 9-10 所 示 ， 单 击 “ 获 取 ” 按 钮 后 会 在 弹出 的 对 话 
信息 ， 如 图 9-11 所 示 。 


当前 位 置 (BFF , 经度): 36. 665282, 116. 994917 
厂 阻止 此 页 面 创建 其 他 对 话 框 


获取 当前 的 定位 信息 “总 取 | 


图 9-10 执行 效果 图 9-11 显示 当前 的 定位 信息 
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Æ HTML 5 网 页 应 月 


H! 


的 代码 块 ， 分 别 


户 等 待 的 局 面 。 后 台 的 单个 独 


全 线程 中 还 可 以 i 


绍 使 用 Worker ££ f 


使 用 Web Workers API 


， 使 用 Worker 可 以 将 前 台 ! 
| 不 同 的 后 台 线 程 负 责 执 行 ， 
hE 六 线程 不 仅 可 以 被 前 


AME 


周 用 新 的 子 线程 ， 
前 、 


H 


方式 实现 


e 


JJ ü 


10.1 Web Workers API 基础 


MS X Ex, d 


| V 


器 是 单线 程 的 ， 


后 台数 据 交互 的 过 程 


这 样 可 以 避免 由 了 
= 


的 JavaScript 代码 分 割 成 若干 个 分 散 
前 台 单 线程 执行 缓慢 出 现 用 


所 调用 ， 实 现 数据 间 的 互 访 ， 而 
I 父 线 程 的 功能 ， 实 现 线程 的 幅 套 调用 。 本 章 将 详细 介 


并 通过 实例 浊 


, 


CHAH 


BMH RE 


示 实 现 流程 。 


在 后 


的 所 有 


脚本 一 起 在 单个 


UI 线程 中 运行 。 虽然 可 以 通过 使 用 文档 对 象 模 型 (DOM) 事件 和 setTimeout API 造成 一 种 多 


^H 


E 务 同时 在 运行 的 假象 , 但 


Workers API 的 基本 知识 。 


只 需 一 个 


计算 密集 型 任务 就 会 使 用 户 体验 日 


10.1.1 f£ FH HTMLS Web Workers API 


Ho. 


将 简要 介绍 Web 


使 用 Web Workers 的 方法 非常 简单 ， 只 需 创建 一 个 Web Workers 对 象 ， 然 后 传 入 希 


望 执行 的 JavaScript x fl 


Worker 发 来 的 消 ， 


息 和 错误 信 ， 


FE. Ah, AW MY 
息 。 如 果 想 要 在 页 面 与 Web Workers 之 间 建 立 通信 ， 数 据 需 
要 通过 函数 postMessageO?K £638. X13 


PEE NE 


监听 器 ， 月 


日 来 监听 由 Web 


F Web Worker Javascript 中 的 代码 也 是 如 此 ， 也 必 


须 通过 设置 事件 处 理 程序 来 处 理发 来 的 消息 和 错误 信息 ， 通 过 postMessage 函数 实现 与 


页 面 的 数据 交互 。 


(1) 创建 HTML5 Web Workers 


Web Workers 初始 化 时 会 接受 一 个 Javascript 文 伯 
行 的 代码 。 这 段 代码 会 设置 事 付 


URL 可 以 是 相对 或 者 绝对 路 径 ， 只 要 是 同 源 《〈 相 同 协议 、 主 机 和 端口 


监听 器 ， 


worker-new Worker("echoWorker.js"); 


(2) Z Javascript 文件 的 加 载 与 执行 


对 于 


importScripts: 


£ Javascript 文件 组 成 的 应 月 
在 页 面 加 载 的 时 候 同步 加 载 Javascript XH. Ai, I 
对 象 的 权限 ， 所 以 在 Worker 上 


JE 


必须 使 用 另外 一 种 方法 导入 


FH] URL 地 址 ， 其 中 包含 了 供 Worker 执 
并 与 生成 Worker 的 容器 进行 通信 。Javascript XA 


的 


) 即 可 : 


序 来 说 ， 可 以 通过 包含 <script> 元 素 的 方式 ， 
于 Web Workers 没有 访问 document 
其 他 的 Javascript 文件 一 一 
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importScripts("helper.]s"); 


导入 的 Javascript 文件 只 会 在 某 一 个 已 有 的 Worker 中 加 载 和 执行 。 多 个 脚本 的 导入 同样 
也 可 以 使 用 importScript 函数 ， 它 们 会 按 顺序 执行 : 


importScripts("helper.js","anotherHelper.]s"); 


(3) 5 HTMLS Web Workers 通信 

一 旦 生成 Web Work， 就 可 以 使 用 postMessage API 传送 和 接收 数据 。postMessage API 还 
文 持 跨 框架 和 跨 窗 口 通信 。 大 多 数 Javascript 对 象 都 可 以 通过 postMessage 发 送 ， 但 含有 循环 
引用 的 除外 。 


10.1.2 ”需要 使 用 .js 文件 
Web Worker API 为 Web 应 用 程序 的 创作 人 员 提 供 了 一 种 方法 ,用 于 生成 与 主页 并 行 运行 


的 后 台 脚 本 。 可 以 一 次 生成 多 个 线程 以 用 于 长 时 间 运 行 的 任务 。 新 的 worker 对 象 需要 一 个 js 
文件 ， 该 文件 通过 一 个 发 给 服务 器 的 异步 请 求 包含 在 内 。 


var myWorker = new Worker('worker.js'); 


p 


往来 于 worker 线程 的 所 有 通信 都 通过 消息 进行 管理 。 主 机 worker 和 worker 脚本 可 以 通 
过 postMessage 发 送 消息 并 使 用 onmessage 事件 侦 听 响应 。 消息 的 内 容 作 为 事件 的 数据 属性 进 
行 发 送 。 

例如 下 面 的 代码 创建 了 一 个 worker 线程 并 侦 听 消息 。 


ln 


var hello = new Worker('hello.js"); 
hello.onmessage = function(e) í 
alert(e.data); 


bs 


iX FÉ worker 线程 可 以 发 送 要 显示 的 消息 。 


postMessage(' Hello world!'); 


10.1.3 E Web Worker 进行 双向 通信 

要 建立 双向 通信 ， 主 页 和 worker 线程 都 要 侦 听 onmessage 事件 。 例 如 下 面 演示 代码 中 的 
Worker 线程 在 指定 的 延迟 后 返回 消息 。 
首先 ， 该 脚本 创建 worker 线程 。 


var echo = new Worker('echo.js'); 
echo.onmessage = function(e) í 
alert(e.data); 


j 
消息 文本 和 超时 值 在 表单 中 进行 指定 。 当 用 户 单 击 “ 提 交 ” 按 钮 时 ， 脚 本 会 将 两 条 信 


息 以 JavaScript 对 象 文 本 的 形式 传递 给 worker, 为 了 防止 页 面 在 新 的 HTTP 请 求 中 提交 表单 
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<script> 
window.onload = function() { 


var echoForm = document.getElementByld('echoForm'); 


里 程序 还 对 事件 对 象 调 用 preventDefault。 
证 :不 能 将 对 DOM 对 象 的 引用 发 送 给 worker 线程 。Web Worker 并 非 可 以 访问 所 有 数 


。 只 允许 访问 JavaScript 基 元 〈 例 如 Object 或 String 值 )。 


echoForm.addEventListener('submit', function(e) í 


echo.postMessage( í 
message : e.target.message.value, 
timeout : e.target.timeout.value 
J 
e.preventDefault(); 
}, false); 
} 
</script> 
<form id="echoForm"> 


<p>Echo the following message after a delay.</p> 
<input type="text" name-"message" value=" Input message here."/><br/> 


<input type="number" name="timeout" max="10" value="2"/> seconds.<br/> 


<button type="submit">Send Message</button> 


</form> 


最 后 ，worker 


onmessage = function(e) 
1 


setTimeout(function() 


1 


postMessage(e.data.message); 


P 


e.data.timeout * 1000); 


j 


TE Internet Explorer 10 和 使 月 
所 示 的 方法 。 


始 侦 听 消息 ， 并 在 指定 的 超时 间隔 之 后 将 


H JavaScript 的 Metro 风格 应 用 中 , Web Worker API 文 持 表 10-1 


3k 10-1. Web Worker API 支持 的 方法 


方 ”法 


f — X 


void close() 


终止 worker 线程 


导入 其 


void importScripts(inDOMString... urls) 


他 JavaScript 文件 的 逗号 分 隔 列 表 


void postMessage〔 在 任何 数据 中 ) 


Internet Explorer 10 和 使 用 JavaScript 的 Metro 风格 应 


API 属性 。 
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从 worker 线程 发 送 消息 或 发 送 消息 到 worker 线程 


]. 支持 表 10-2 所 示 的 Web Workers 
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Web Workers API ^77 


表 10-2. Web Workers API 属性 
属 PE 类 m 描 述 
location WorkerLocation 代表 绝对 URL， 包 括 protocol. host. port. hostname. pathname, search 和 hash 组 件 
navigator WorkerNavigator 代表 用 户 代理 客户 端的 标识 和 onLine 状态 
Self WorkerGlobalScope Worker 范围 ， 包 括 WorkerLocation 和 WorkerNavigator 对 象 
Internet Explorer 10 和 使 用 JavaScript 的 Metro 风格 应 用 ,支持 表 10-3 所 示 的 Web Workers 
API 事件 。 
表 10-3 Web Workers API 事件 
事 d 描述 
onerror 出 现 运行 时 错误 
onmessage 接收 到 消息 数据 
Web Worker API 还 支持 更 新 的 HTML5 WindowTimers 功能 ， 如 表 10-4 所 示 。 
表 10-4 WindowTimers 方法 
Ù Ù 描 8 
void clearInterval(inlonghandle) 取消 由 句柄 所 确定 的 超时 
void clearTimeout(inlonghandle) 取消 由 句柄 所 确定 的 超时 
i — M Q 计划 在 指定 的 毫秒 数 之 后 重复 运行 的 超时 。 注 : 现在 可 以 将 其 他 参数 直接 传 
(inanyhandler, inoptionalany | 递 到 处 理 程序 。 如 果 处 理 程序 是 DOMString， 它 被 编译 成 JavaScript。 将 句柄 
imeout, inany... args) je T xk 
返回 到 超时 ， 清 除 clearInterval 
:可 洗 的 任 计划 在 指定 的 毫秒 数 之 后 运行 的 超时 。 注 : 现在 可 以 将 其 他 参数 直接 传递 到 
08 setTimeoutlirianyhandler, 在 可 选 的 任 处 理 程序 。 如 果 处 理 程序 是 DOMString， 它 被 编译 成 JavaScript。 将 句柄 返 匠 
何 超时 中 ， 在 任何 … 参 数 中 ) i 
到 超时 ， 清 除 clearTimeout 


10.2 Worker 线程 处 理 


如 果 一 个 网 页 的 执行 时 
交 给 后 台 线 程 Worker 去 处 理 


EE 
HH 


o 


HRK, Fe 可 能 需要 用 户 


它 与 前 台 的 线程 分 离 ， 互 不 


等 待 一 段 时 间 去 操作 ， 此 时 可 以 将 工作 


E 
Na 


是 可 以 通过 方法 


啊 ， 但 


postMessage() Ej onmessage a 的 交互 。 方 法 postMessage0 用 于 通过 worker 对 象 发 


送 数据 ， 有 具体 调用 的 格式 如 下 : 
var objWorker-new Worker ("脚本 文件 URL") ; 
objWorker.postMessage (data); 
口 第 一 行 代码 :用 于 实例 化 一 一 个 Worker 类 对 象 , 创建 了 一 个 名 为 objWorker 的 后 台 线程 。 
口 第 二 行 代码 :通过 obj Worker 调用 方法 postMessage0, 向 后 台 线程 发 送 文 本 格式 的 data 
数据 。 
为 了 在 前 台 接 收 后 台 线程 返回 的 数据 ， 需 要 在 定义 obj Worker 对 象 后 添加 一 个 message 
事件 ， 用 于 捕捉 后 台 线程 返回 的 数据 。 有 具体 调用 的 格式 如 下 : 


obj Worker.addEventListener(' message', 


function (event) í 
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alert (event.data); 


)， 
false); 


其 中 ，event.data 表示 后 台 线 程 处 理 完成 后 返回 给 前 台 的 数据 。 


10.2.1 使 用 Worker 处 理 线程 

下 面 将 通过 一 个 实例 讲解 使 用 Worker 处 理 线程 的 方法 。 本 实例 创建 了 一 个 HIML 5 页 面 ， 
当 页 面 在 加 载 时 创建 了 一 个 Worker 后 台 线 程 。 当 用 户 在 文本 框 中 输入 生成 随机 数 的 位 数 并 单 
击 “ 请 求 ” 按 钮 时 ， 向 该 后 台 线 程 发 送 文 本 框 中 的 输入 值 ， 后 台 线 程 将 根据 接收 的 数据 生成 
指定 位 数 的 随机 数 ， 返 回 给 前 台 调用 代码 并 显示 在 页 面 中 。 


实例 10-1 说 BJ 
源码 路 径 daima\10\1.html 
功能 使 用 Worker 处 理 线程 


实例 文件 1.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

«title» Worker 处 理 线程 </title> 

<link href-"css.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" language="jscript" 


src="Js1.Js"/> 
</script> 
</head> 
<body onLoad="pageload();"> 
<fieldset> 
<legend> 线 程 脚本 处 理 数据 </legend> 
<p id="pStatus"></p> 
«input id—"txtNum" type="text" LO 
«input id-"btnAdd" type="button" value=" 请 
class-"inputbtn" onClick-"btnSend Click();"7 
</fieldset> 
</body> 
</html> 


在 上 述 页 面 中 导入 一 个 JavaScript 文件 js1js， 在 里 面 自 定义 了 两 个 函数 ， 分 别 在 页 面 加 
载 与 单 击 “ 请 求 ”按钮 时 调用 。 文 件 jsljs 的 代码 如 下 。 


function $$(id) í 
return document.getElementBylId(id); 


J 
var obj Worker = new Worker("js1_1.js"); 
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// 自 定义 页 面 加 载 时 调用 的 函数 
function pageload() { 


objWorker.addEventListener('message', 
function(event) í 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML += event.data; 
J. 
false); 
} 
// 自 定义 点 击 "请 求 "按钮 时 调用 的 函数 
function btnSend Click() í 
/获取 发 送 内 容 
Var strIxtValue = $$("txtNum").value; 
if (strTxtValue.length > 0) í 
objWorker.postMessage(strTxtValue); 
$$("txtNum").value = ""; 


j 
TE. E38 JavaScript 文件 jsl.js 的 代码 中 ， 通 过 Worker 对 象 调 用 了 一 个 后 台 线 程 脚本 文人 
jsl_1js。 在 该 文件 中 ， 根 据 获取 的 位 数 生 成 随机 数 并 将 该 数值 返回 前 台 。 文 件 jsl Ljs 的 实现 
代码 如 下 所 示 。 


iT 


Cu 


LH 


self.onmessage = function(event) í 
var strRetHTML = "<span><b> "; 
strRetHTML += event.data + "</b> 位 随机 数 为 : <b> "; 
strRetHTML += RetRndNum(event.data); 
strRetHTML += " </b></span><br>"; 
self.postMessage(strRetHTML); 
} 
/生成 指定 长 度 的 随机 数 
function RetRndNum(n) í 
var strRnd = ""; 
for (var intl = 0; intl < n; intIt+) í 
strRnd += Math.floor(Math.random() * 10); 


j 


return strRnd; 


j 
羊 式 文件 css.css 的 代码 如 下 。 


(Q)charset "utf-8"; 

/* CSS Document */ 

body í 
font-size:12px 


>- 


j 


.inputbtn í 
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height:260px; 
width:560px; 
j 


本 实例 首先 定义 一 个 后 台 线 程 obj Worker, H 


脚本 文件 指向 js175_1js， 表 示 


该 文件 实 


现 前 台 请 求 的 操作 。 当 用 户 在 文本 框 中 输入 随机 数 长 度 并 单 击 “ 请 求 ”按钮 时 ， 该 输入 的 内 
容 通过 调用 线程 obj Worker 对 象 的 postMessage0 方 法 ， 发 送 至 脚本 文件 js175_1js。 在 脚本 文 


fF js175 Ljs 中 ， 通 过 添加 message 事件 获取 前 台 传 回 的 数据 ， 
自 定 义 函 数 RetRndNumgO 的 实 参 ， 生 成 指定 位 数 的 随机 数 
selfpostMessage0) 发 送 至 调用 后 台 线 程 的 前 台 程序 。 在 前 台 代 码 中 


` 


诈 将 该 数据 值 event.data 作为 
， 并 将 该 


随机 数 通 过 方法 
通过 添加 message 事件 获 


取 后 全 线程 处 理 完成 后 传 回 的 数据 ， 并 将 数据 的 信息 展示 在 页 面 ! 


。 昌 然后 侣 线程 可 以 处 理 


前 台 的 代码 ， 但 是 不 允许 后 台 线 程 中 访问 前 台 页 面 的 对 象 或 元 素 。 如 果 访 问 后 台 线 程 将 报错 ， 


的 交互 。 
图 10-1 所 示 。 


它们 只 限于 进行 数据 
执行 后 的 效果 如 


I) Yorker 处 理 线程 - Nozilla Firefox 


wO 编辑 区 ) EEV DEE 书签 BB) IAT #Rh Q 


=iojxi 


PMET X |i ;Yorker 处 理 线程 
€ C” file: @ 


x | G 搜索 关键 宇 : Geolo… x | 十 


el[&-s* ?|i& - fé msm- 


线程 脚本 处 理 数 据 


位 随机 涩 为 : 4 

位 随机 数 为 436 

位 随机 数 为 : 070847656 
位 随机 数 为 : T942 

位 随机 数 为 : 44 

位 随机 数 为 : 1 

位 随机 数 为 : 98481 


m= Ñ & OD Ó = 


请 求 


图 10-1 执行 效果 


10.2.2 ”使 用 线程 传递 JSON 对 象 


f£ HTML 5 网 页 中 ， 可 以 使 用 后 台 线 程 传递 JSON 对 象 。 具体 方法 是 通过 后 


一 个 JSON 对 象 给 前 台 ， 然 后 前 台 接 收 并 显示 JSON 对 象 内 容 。 


台 线 程 传递 


下 而 通过 一 个 具体 实例 i 
页 面 中 , 当 加 载 页 面 时 创建 一 个 Worker 后 台 线 程 ， 


解 使 用 线程 传递 JSON 对 象 的 方法 。 在 本 实例 新 建 的 HIML 5 
该 线程 将 返回 给 前 台 页 面 一 个 JSON 对 象 ， 


前 台 获 取 该 JSON 对 象 ， 使 用 遍历 的 方式 显示 对 象 中 的 全 部 内 容 。 


实例 10-2 说 gj 
源码 路 径 daima\10\2.html 
功能 使 用 线程 传递 SON 对 象 
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实例 文件 2.html 的 实现 代码 如 下 。 


在 上 述 页 面 中 导入 了 一 个 JavaScript 文人 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title> 使 用 线程 传递 JSON 对 象 </title> 

<link href-"css.css" rel="stylesheet" type="text/css"> 


'jscript" 


<script type="text/javascript" language: 
sre="js2.js"/> 
</script> 
</head> 
<body onLoad="pageload();"> 
<fieldset> 
<legend> 使 用 线程 传递 JSON XI «legend 
«p id="pStatus"></p> 
</fieldset> 
</body> 


</html> 


页 面 加 载 时 调用 。 文 件 js2.js 的 实现 代码 如 下 。 


function $$(id) í 
return document.getElementById(id); 


j 
var obj Worker = new Worker("js2. 1.js"); 


/ 自 定义 页 面 加 载 时 调用 的 函数 
function pageload() í 


E 


objWorker.addEventListener('message', 
function(event) í 
var strHTML = ""; 
var ev — event.data; 
for (var i in ev) í 
strHTML +="<span>"+ i +" :"; 
StrHTML +="<b> " + ev[i] + " </b></span><br>"; 
j 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML = strHTML; 
h 
false); 
objWorker.postMessage(""); 
j 


在 上 述 JavaScript 文件 js2.,s 的 代码 中 ， 调 用 了 后 台 线 程 脚本 文 从 


过 方法 postMessage0 回 前 台 发 送 JSON 对 象 。 文 从 
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simmi 


F js2_1js， 在 此 文人 


Fjs2 Ljs 的 实现 代码 如 下 。 


T 


F js2.js， 在 里 面 自 定义 了 一 个 函数 pageload(). 在 


E 
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var json = í 
姓名 : "约翰 内 斯 堡 ", 
性 别 :" 男 "， 
邮箱 : "27999999@163.com", 
武器 : "光芒 神 剑 ", 


攻击 值 : "100" 

}; 

self.onmessage = function(event) í 
self.postMessage(json); 
close(); 

} 


在 本 实例 的 上 述 代 码 中 ， 当 加 载 页 面 时 触发 onLoad 事件 , 该 事件 调用 了 pageload0 函 数 。 
该 函数 首先 定义 一 个 后 台 线 程 对 象 obj Worker， 脚 本 文件 指向 js2_1js， 并 通过 调用 对 和 象 的 方 
法 postMessage() 疝 后 人 台 线 程 发 送 一 个 空 字 符 请 求 。 在 后 台 线 程 指向 文件 js2_1js 中 ， 先 自 定义 
一 个 JSON 对 象 json， 当 通过 message 事件 监测 前 台 页 面 请 求 后 ， 调 用 方法 selfpostMessage() 
回 前 台 代 码 传递 JSON 对 象 ， 并 使 用 close 语句 关闭 后 台 线 程 。 前 台 为 了 在 message 事件 中 获 
取 传 递 来 的 JSON 对 象 内 容 ， 使 用 for 语句 的 遍历 了 整个 JSON 对 象 的 内 容 ， 并 将 内 容 显示 在 
页 面 中 。 执 行 后 的 效果 如 图 10-2 所 示 。 


D 使 用 钱 程 传递 JSOH 对 象 - Nozilla Firefox = [jx] 
X) RHD SEU DREO HEO IAM #BhQO 


PMET x E 使 用 线程 传递 JS0ON.… x | € sexos : 6eolo0… x | + 
€ C sas @ 7 c |[@)- s= P| e$ à s 
一 使 用 线程 传递 JS0N 对 象 


武器 : 光芒 神 剑 
攻击 值 : 100 


图 10-2 ”执行 效果 


10.2.3 “使 用 线程 对 套 交互 数据 

在 后 台 线 程 中 还 可 以 继续 调用 线程 ， 实 现 分 割 主线 程 的 功能 ， 并 最 终 形成 线程 嵌 套 处 理 

代码 的 格局 。 这 种 方式 可 以 将 各 个 功能 块 分 离 ， 形 成 独立 的 子 模块 ， 有 利于 开发 Web 应 用 。 
下 面 将 通过 一 个 具体 实例 讲解 使 用 线程 嵌 套 交互 数据 的 方法 。 本 实例 以 于 前 面 的 实例 

10-2 为 基础 ， 新 添加 了 一 个 显示 随机 数 奇偶 特征 的 功能 。 当 用 户 在 页 面 中 输入 生成 随机 数 的 

位 数 并 单 击 “ 请 求 ”按钮 后 ， 不 仅 在 页 面 中 显示 对 应 位 数 的 随机 数 ， 而 且 将 随机 数 的 奇偶 特 
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征 一 起 显示 在 页 面 中 。 


实例 10-3 说 — HH 
源码 路 径 daima\10\3.html 
功能 Ji HERE ESAE HUS 
注意 : 目前 ， 只 有 Firefox 5.0 浏览 器 支持 这 种 后 台子 线程 误 套 交互 数据 的 方法 。 


实例 文件 3.html 的 具体 实现 代码 如 下 。 


` 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title> 使 用 线程 撕 套 交互 数据 </title> 

<link href-"css.css" rel="stylesheet" type="text/css 


J 


<script type="text/javascript" language="jscript" 
sre="js3.js"/> 

</script> 

</head> 

<body onLoad="pageload();"> 

<fieldset> 

*legend-£E FEK EWA H.>k 2rjjs</leeend> 
<p id="pStatus"></p> 
<input id="txtNum" type="text" class 


1 


"3 


nputtxt"> 


<input id="btnAdd" type="button" value=" 请 求 " 
class-"inputbtn" onClick-"btnSend Click();"> 


«/fieldset^ 
</body> 
</html> 


在 上 述 HTML 5 页 面 
别 供 在 页 面 加 载 与 单 击 “ 请 求 ” 按 钮 时 调用 。 文 从 


导入 了 一 个 JavaScript 文件 js3.js, EH 


B 面 自 定义 了 两 个 函数 ， 分 


function $$(id) í 
return document.getElementById(id); 


} 
var obj Worker = new Worker("js3 1.js"); 


// 自 定义 页 面 加 载 时 调用 的 函数 
function pageload() { 


objWorker.addEventListener('message', 
function(event) í 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML += event.data; 


ils 
false); 
j 
/ 自 定义 点 击 "请 求 "按钮 时 调用 的 函数 
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function btnSend Click() í 
/获取 发 送 内 容 
var strTxtValue = $$("txtNum").value; 
if (strTxtValue.length > 0) í 
objWorker.postMessage(strTxtValue); 
$$("txtNum").value = ""; 


j 


在 上 述 JavaScript 文件 js3 js 代码 中 ， 调 用 了 后 台 线 程 脚本 文件 js3_1.js， 此 文件 能 够 通过 
指定 位 数 生成 随机 数 。 文 件 js3_Ljs 的 实现 代码 如 下 。 


self.onmessage = function(event) í 
var IntLen = event.data; 
var LngRndNum = RetRndNum(intLen); 
var obj Worker = new Worker("js3 1 1.js"); 
objWorker.postMessage(LngRndNum); 
objWorker.onmessage = function(event) í 
var strRetHTML = "<span><b> "; 
StrRetHTML += intLen + "</b> 位 随机 数 为 : <b> "; 
strRetHTML += LngRndNum; 
strRetHTML +=" </b> " + event.data + " </span><br>"; 
self.postMessage(strRetHTML); 
j 
} 
/生成 指定 长 度 的 随机 数 
function RetRndNum(n) í 
var strRnd = ""; 
for (var intI = 0; intl < n; intIt+) í 
strRnd += Math.floor(Math.random() * 10); 


j 


return strRnd; 


j 


在 上 述 JavaScript 文件 js3 Ljs 代码 中 ， 调 用 了 另外 一 个 后 台 线 程 脚本 文件 js3_1 1js， 此 
文件 可 以 检测 随机 数 奇偶 的 特征 。 文 件 js3 1 Ljs 的 实现 代码 如 下 。 


self.onmessage = function(event) í 
if (event.data % 2 == 0) í 
self.postMessage("oushu"); 
) else í 
self.postMessage("jishu"); 
} 
self.close(); 


} 


本 实例 是 以 前 面 的 实例 10-2 为 基础 的 , 为 了 既 在 前 台 页 面 中 显示 按 指定 位 数 生成 的 随机 
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数 ， 也 能 够 检测 随机 数 奇偶 特征 ， 在 调用 的 后 台 线 程 中 使 用 了 髓 套 的 方式 来 实现 。 在 脚本 文 
件 js3.js 中 指定 的 后 台 线 程 文件 js3_ljs 为 主线 程 。 文 件 js3_l.js 的 运作 流程 如 下 : 
(1) fE message 事件 中 获取 前 台 页 面 传 来 的 生成 随机 数 的 长 度 值 event.data， 并 保存 至 变 


BRI 
B 
[^ 
[e] 
5 
d 


(2) 根据 该 变量 值 调 用 函数 RetRndNum0， 生 成 一 个 指定 长 度 的 随机 数 ， 并 保存 至 变量 
LngRndNum 中 。 

(3) 创建 一 个 后 台子 线程 对 象 obj Worker， 并 指定 该 对 象 的 脚本 文件 为 js3_ 1 1.js， 通 过 方 
法 postMessage0 将 生成 的 随机 数 发 送 给 obj Worker 对 象 对 应 的 脚本 文件 。 

子 线程 文件 js3 1 Ljs 的 功能 是 通过 监测 message 事件 获取 event.data fti, 得 到 主线 程 传 
的 随机 数 ， 并 通过 “event.data%2” 的 方法 检测 随机 数 的 奇偶 性 ， 通 过 postMessage() 方 法 返 
给 主线 程 。 主 线程 j$3_ Ljs 文件 在 监测 的 message 事件 中 接收 子 线程 传 回 的 随机 数 奇偶 特征 ， 
与 生成 的 随机 数 一 起 组 成 一 个 字符 串 ， 通 过 方法 self.jpostMessage() 将 字符 串 传递 给 前 台 页 面 。 
前 台 页 面 在 监测 的 message 事件 中 ， 获 取 后 台 主 线程 传 回 的 数据 event.data， 即 将 字符 串 内 容 
显示 在 页 面 中 


执行 后 的 效果 如 图 10-3 所 示 。 


-~ 


I| m 


) 使 用 线程 嵌 套 交互 数据 - Hozilla Firefox NN ici xj 
TAO dia) SEV PLO HEO IAV Rw) 

PMET x| 使 用 线程 嵌 套 交互 数据 x | 隔 国 华 印象 -济南 房 地 … > | + 
€ C filen C|| 图 - s= Plenel é PSS 821: 
三 线程 嵌 套 请 变 互 求 数据 


1 位 随机 数 为 : 5 jishu 

13 位 随机 数 为 : 2180712634067 jishu 
2 位 随机 数 为 : 25 jishu 

8 位 随机 数 为 : 40917628 oushu 

11 位 随机 数 为 : 59987354750 oushu 
3 位 随机 数 为 : 09T jishu 

5 位 随机 数 为 : 08932 oushu 

9 位 随机 数 为 : 471083801 jishu 

16 位 随机 数 为 : 8815698855516255 
jishu 


请 求 


图 10-3 ”执行 效果 


需要 说 明 的 是 ， 主 线程 癌 子 线程 发 送 数据 时 ， 使 用 子 线程 对 象 的 postMessage0 方 法 ， 即 
objWorker.postMessage(LngRndNum); 而 在 向 前 台 页 面 发 送 数 据 时 ， 则 使 用 线程 自身 的 
postMessage()7;1X, BH self postMessage(strRetHTML)， 或 者 也 可 以 省 略 self. 


10.2.44 ”通过 JSON 发 送 消息 

众所周知 ，Web Workers 可 以 通过 Message channels 进行 通信 。 虽 然 在 大 多 数 情 况 下 ， 用 户 
会 发 送 更 加 结构 化 的 数据 给 Workers。 但 是 使 用 JSON 格式 是 唯一 可 以 给 worker 发 送 结构 化 消息 
的 方法 。 幸 运 的 是 ， 浏 览 器 现在 支持 worker 的 程度 已 经 与 原生 文 持 JSON 的 程度 一 样 好 了 。 
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下 面 通过 一 个 实例 讲解 通过 JSON 发 送 消息 的 方法 。 在 本 实例 中 编写 另 一 个 
WorkerMessage 类 型 的 对 象 ， 这 种 类 型 将 被 用 来 向 Web Workers 发 送 一 些 带 参数 的 命令 。 


T 


实例 10-4 说 明 
源码 路 径 daima\10\4.html 
功能 通过 JSON 发 送 消 息 


实例 文件 4.html 的 具体 实现 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 
<title>Hello Web Workers</title> 
</head> 
<body> 
<input id=inputForWorker /> 
<button id=btnSubmit>Send to the worker</button> 
«button id=killWorker>Stop the worker</button> 
<div id="output"></div> 


EAE 


«script src-"js4.js" type="text/javascript"></script> 
</body> 


</html> 


脚本 文件 js4.js 的 具体 代码 如 下 。 


function WorkerMessage(cmd, parameter) í 

this.cmd = cmd; this.parameter = parameter; 

} 

// 显示 输出 部 分 

var output = document.getElementByld("output"); 

/* Checking if Web Workers are supported by the browser */ 
if (window. Worker) í 

/被 引用 到 其 他 3 个 元 素 

var btnSubmit = document.getElementBylId("btnSubmit"); 


var inputForWorker = document.getElementById("inputForWorker"); 
var killWorker = document.getElementBylId("kill Worker"); 

var myHello Worker = new Worker('helloworkersJSON EN.js'); 
myHelloWorker.addEventListener("message", function (event) í 

. output.textContent = event.data; 

}, false); 

/ 发 送 初 始 化 命令 

myHello Worker.postMessage(new WorkerMessage('init', null)); 

/添加 的 提交 按钮 单 击 事件 
/ 发送 信息 
_btnSubmit.addEventListener("click", function (event) í 
// We're now sending messages via the 'hello' command 


myHello Worker.postMessage(new WorkerMessage('hello', inputForWorker.value)); 
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}, false); 

/添加 的 按钮 单 击 事件 
// which will stop the worker. It won't be usable anymore after that. 
. killWorker.addEventListener("click", function (event) í 
myHelloWorker.terminate(); 


. output.textContent — "The worker has been stopped."; 
}, false); 
} else í 


. output.innerHTML = "Web Workers are not supported by your browser. Try with IE10: «a href- "http: 


/lie.microsoft.com/testdrive download the latest IE10 Platform Preview</a>"; 


j 


在 上 述 JavaScript 代码 中 ， 使 用 了 一 种 非 侵入 式 的 JavaScript 方法 来 帮助 用 户 分 离 表 现 层 


和 届 辑 层 。 执 行 后 的 效果 如 图 10-4 所 示 。 
= Dl xl 


wO SB (E) SEV 历史 (8) SEG) IA #Bh0Q0 

-正在 … [| 百度 搜索 W… Í iWeb Worker- 图 JavaScript [Hello Wee x|» + = 
€ T asvia blo. Q e|la-se 2| @- F é&ri 有 |: 
[1 Send to the worker | Stop the worker | 


Hello 111 from a separate thread! 


图 10-4 ”执行 效果 


10.3 ”执行 大 计算 量 任务 


众多 程序 员 ， 特 别 是 游戏 程序 员 ， 一 直 致 力 于 寻求 一 种 高 性 能 的 图 形 泻 染 方法 ， 而 路 径 
查找 则 是 一 个 非常 有 用 的 功能 ， 可 以 用 于 创建 道路 或 显示 角色 从 A 点 到 B 点 的 过 程 。 也 就 是 
说 ， 路 径 查 找 算 法 就 是 要 在 n 维 《通常 是 2D 或 3D) 空间 中 找 出 两 点 间 的 最 短路 线 。 

处 理 路 径 查 找 的 一 种 最 佳 算法 叫做 A* 算 法 ， 是 迪 杰 斯 特 拉 CDijkstra) 算法 的 变 体 。 


路 径 查 找 《〈 或 者 类 似 的 计算 时 间 超 过 数量 秘 的 操作 ) 的 问题 在 于 ， 它 们 会 


导致 JavaScript 


产生 一 种 名 为 “界面 锁定 ”的 效果 , 也 就 是 在 操作 完成 以 前 , 浏览 器 将 一 直 被 冻结 。HITML5 


规范 也 提供 了 一 个 名 为 Web Workers 的 新 API. Web Workers (通常 称 为 “ 


‘worker”) 可 以 


让 用 户 在 后 台 执行 计算 量 相对 较 大 以 及 执行 时 间 较 长 的 脚本 , 而 不 会 影响 浏览 器 的 主 用 户 


界面 。 
创建 worker 的 语法 格式 如 下 : 


var worker = new Worker(PATH TO A JS SCRIPT); 


其 中 的 PATHTOAJSSCRIPT 可 以 是 一 个 脚本 文件 ， 比 如 astarjs. 在 创建 了 worker 之 后 ， 
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随时 可 以 调用 worker.close0 4 1l 
操作 ， 那 就 得 再 创建 一 个 新 上 


workeronmessage 事件 


F 它 的 执行 。 如 果 终 止 了 一 个 worker， 然 后 又 需要 执行 一 个 新 
的 worker 对 象 。 在 Web Workers 之 间 的 通信 ， 是 通过 在 


的 加 


H KAU 


以 通过 onerror 事件 处 到 


持 引 入 外 部 脚本 ， 使 用 
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调用 workerpostMessage(objecb 来 实现 的 。 此 外 ， 还 可 


LE 程序 来 处 理 worker 的 错误 。 与 普通 的 网 页 类 似 ，Web Workers 也 文 
的 是 importScriptsO 函 数 。 此 函数 可 以 接受 0 个 或 多 个 参数 ， 如 果 有 参 
数 ， 每 个 参数 都 应 该 是 一 个 JavaScript 文件 。 


下 面 通过 一 个 实例 讲解 使 用 Web Workers API 执行 大 计算 量 任务 的 方法 。 
实例 10-5 说 明 
源码 路 径 daima\10\5.html 
功能 使 用 Web Workers API 执行 大 计算 量 任务 


在 本 实例 的 HTML 5 页 面 中 ， 定 义 了 一 个 用 JavaScript 实现 的 A* 算法 ， 在 实现 过 程 ， 
使 用 了 Web Worders。 实 例文 件 5.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 
<html lang="en"> 


<head> 


<meta charset="UTF-8" /> 


<title> 使 用 web workers)</title> 


<script> 


window.onload = function () { 


var tileMap = [ |; 
var path = í 
start: null, 
stop: null 

j 

var tile = í 
width: 6, 
height: 6 

j 

var grid = í 
width: 100, 
height: 100 
} 


var canvas = document.getElementByld('myCanvas'); 
canvas.addEventListener('click', handleClick, false); 
var c = canvas.getContext('2d'); 
/ 随机 生成 1000 个 元 素 

for (var i = 0; i < 1000; it) í 
generateRandomElement(); 


j 


/ 绘制 整个 网 格 


draw(); 


function handleClick(e) í 
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/ 检测 到 鼠标 单 击 后 ， 把 鼠标 坐标 转换 为 像素 坐标 
var row = Math.floor((e.clientX - 10) / tile.width); 

var column = Math.floor((e.clientY - 10) / tile.height); 
if (tleMap[row] == null) í 

tileMap[row] = []; 

j 

if (tileMap[row][column] !— 0 && tileMap[row][column] !— 1) í 
tileMap[row][column] = 0; 

if (path.start === null) í 

path.start — (x: row, y: column]; 

} else í 

path.stop = (x: row, y: column]; 


callWorker(path, processWorkerR esults); 
path.start = null; 

path.stop = null; 

j 

draw(); 

j 

} 

function callWorker(path, callback) í 
var w = new Worker('js5.js'); 
w.postMessage(1 

tileMap: tileMap, 

grid: ( 

width: grid.width, 

height: grid.height 

ic 

start: path.start, 

stop: path.stop 

J); 

w.onmessage = callback; 


j 


function processWorkerResults(e) í 

if (e.data.length > 0) í 

for (var i = 0, len = e.data.length; i < len; i) í 

if (tileMap][e.data[1].x] === undefined) í 
tileMap[e.data[1].x] = []; 

j 

tileMap[e.data[i].x ][e.data[1].y] = 0; 

} 

} 

draw(); 

j 

function generateRandomElement() í 

var rndRow = Math.floor(Math.random() * (grid.width + 1)); 
var rndCol = Math.floor(Math.random() * (grid.height + 1)); 
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if (tileMap[rndRow] == null) í 

tileMap[rndRow] = [ |; 

j 

tileMap[rndRow][rndCol] = 1; 

j 

function draw(srcX, srcY, destX, destY) ( 

srcX = (srcX —= undefined) ? 0 : srcX; 

srcY = (srcY —= undefined) ? 0 : srcY; 

destX = (destX === undefined) ? canvas.width : destX; 
destY = (destY === undefined) ? canvas.height : destY; 
c.fillStyle = '#FFFFFF'; 

c.fillRect (SrcX, srcY, destX + 1, destY + 1); 

c.fillStyle = '#000000'; 

var startRow = 0; 

var startCol = 0; 

var rowCount = startRow + Math.floor(canvas.width / tile. 
width) + 1; 

var colCount = startCol + Math.floor(canvas.height / tile. 
height) + 1; 


rowCount = ((startRow + rowCount) > grid.width) ? grid.width : 


rowCount; 

colCount = ((startCol + colCount) > grid.height) ? grid.height : 
colCount; 

for (var row  startRow; row < rowCount; row++) í 

for (var col = startCol; col < colCount; col++) í 

var tilePositionX = tile.width * row; 

var tilePositionY = tile.height * col; 

if (tilePositionX >= srcX && tilePositionY >= srcY && 
tilePositionX <= (srcX + destX) && 

tilePositionY <= (srcY + destY)) í 

if (tleMap[row] != null && tileMap[row][col] != null) í 
if (tleMap[row][col] = 0) í 

c.fillStyle = '#CC0000'; 

} else í 


c.fillStyle = '#0000FF'; 


j 


c.fillRect(tilePositionX, tilePositionY, tile.width, 
tile.height); 

} else í 

c.strokeStyle = CCCCCC'; 
c.strokeRect(tilePositionX, tilePositionY, tile. width, 
tile.height); 


[c ewm xev deed 
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} 

j 

</script> 

</head> 

<body> 

<canvas id="myCanvas" width="600" height="300"></canvas> 
<br > 

</body> 

</html> 


脚本 文件 js5js 的 代码 如 下 。 
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/此 worker 处 理 负 责 aStar 类 的 实例 

onmessage = function(e)í 

var a = new aStar(e.data.tileMap, e.data.grid.width, e.data.grid.height, 
e.data.start, e.data.stop); 

postMessage(a); 

} 

/ 基于 非 连续 索引 的 tleMap 调整 后 的 A* 路 径 查 找 类 

var aStar = function(tileMap, gridW, gridH, src, dest, createPositions) í 


this.openList = new NodeList(true, 'F'); 

this.closedList = new NodeList(); 

this.path = new NodeList(); 

this.src — src; 

this.dest — dest; 

this.createPositions = (createPositions === undefined) ? true : 
createPositions; 

this.currentNode = null; 

var grid = í 

rows: gridW, 

cols: gridH 

j 

this.openList.add(new Node(null, this.src)); 

while (!this.openList.isEmpty()) í 

this.currentNode = this.openList.get(0); 
this.currentNode.visited — true; 

if (this.checkDifference(this.currentNode, this.dest)) í 

/ 到 达 目 的 地 :) 

break; 

} 

this.closedList.add(this.currentNode); 
this.openList.remove(0); 

/ 检查 与 当前 节点 相近 的 8 个 元 素 

var nstart = í 
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x: (((this.currentNode.x - 1) >= 0) ? this.currentNode.x - 1 : 0), 
y: (((this.currentNode.y - 1) >= 0) ? this.currentNode.y - 1 : 0), 


第 10 章 使 用 Web Workers API 


j 

var nstop = í 

x: (((this.currentNode.x + 1) <= grid.rows) ? this.currentNode. 
x + 1 : grid.rows), 

y: (((this.currentNode.y + 1) <= grid.cols) ? this.currentNode. 
y +]: grid.cols), 

} 

for (var row = nstart.x; row <= nstop.X; row++) í 

for (var col = nstart.y; col <= nstop.y; col++) í 

/ 在 原始 的 teMap 中 还 没有 行 ， 还 继续 吗 ? 

if (tileMap[row] === undefined) í 

1f (!this.createPositions) í 

continue; 

} 

} 

/ 检查 建筑 物 或 其 他 障碍 物 

if (tileMap[row] !== undefined && tileMap[row][col] === 1) í 
continue; 

j 


var element — this.closedList.getBy XY (row, col); 


if (element !— null) í 

/ 这 个 元 素 已 经 在 closedList 中 了 
continue; 

} else í 

element = this.openList.getByXY (row, col); 


if (element !— null) í 

/ 这 个 元 素 已 经 在 closedList 中 了 

continue; 

j 

} 

// 还 不 在 任何 列表 中 ， 继 续 

var n = new Node(this.currentNode, (x: row, y: col]); 
n.G = this.currentNode.G + 1; 

n.H = this.getDistance(this.currentNode, n); 


n.F 7 n.G 4 n.H; 
this.openList.add(n); 
j 

j 

j 


while (this.currentNode.parentNode !== null) í 
this.path.add(this.currentNode); 
this.currentNode - this.currentNode.parentNode; 
} 

} 


aStar.prototype.checkDifference = function(src, dest) í 
return (src.x === dest.x && src.y === dest.y); 
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j 


aStar.prototype.getDistance = function(src, dest) í 

return Math.abs(src.x - dest.x) + Math.abs(src.y - dest.y); 
} 

function Node(parentNode, src) í 

this.parentNode = parentNode; 

this.x = src.x; 

this.y = src.y; 

this.F = 0; 

this.G = 0; 

this.H = 0; 


j 


var NodeList — function(sorted, sortParam) ( 

this.sort — (sorted —- undefined) ? false : sorted; 
this.sortParam = (sortParam === undefined) ? 'F' : sortParam; 
this.list = []; 

this.coordMatrix = []; 

j 

NodeList.prototype.add = function(element) í 
this.list.push(element); 

if (this.coordMatrix[element.x] === undefined) í 
this.coordMatrix[element.x] = []; 


j 


this.coordMatrix[element.x][element.y] = element; 

if (this.sort) í 

var sortBy = this.sortParam; 

this.list.sort(function(o1, o2) í return ol[sortBy] - o2[sortBy]; }); 
j 

j 

NodeList.prototype.remove = function(pos) í 

this.list.splice(pos, 1); 


j 


NodeList.prototype.get = function(pos) í 
return this.list[pos]; 

j 

NodeList.prototype.size = function() í 
return this.list.length; 

J 

NodeList.prototype.isEmpty = function() í 
return (this.list.length == 0); 

j 

NodeList.prototype.getBy XY = function(x, y) í 
if (this.coordMatrix[x] === undefined) í 
return null; 

) else í 

var obj = this.coordMatrix[x ][y ]; 
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if (obj == undefined) { 
return null; 
} else í 
return obj; 
} 
j 
j 
NodeList.prototype.print = function() í 
for (var i = 0, len = this.list.length; i < len; i++) í 
console.log(this.list[1].x +" ' + this.list[1].y); 
j 
j 


执行 后 的 效果 如 图 10-5 所 示 。 
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图 10-5 执行 效果 


10.1 在 后 台 运 行 耗 时 较 长 的 运算 


Web Workers 是 HTML 5 新 增 的 ， 用 来 在 Web 应 用 程序 中 实现 后 台 处 理 的 一 项 技术 。 在 


使 用 HTML 4 与 JavaScript 创建 出 来 的 Web 程序 中 , 因为 所 有 的 处 理 都 是 在 单线 程 内 执行 的 ， 
所 以 如 果 人 花费 的 时 间 比 较 长 的 话 ， 程 序 界 面 会 处 于 长 时 间 没 有 响应 的 状态 。 最 恶劣 的 是 ， 如 
时 间 长 到 一 定 程 度 ， 浏 览 器 还 会 跳出 一 个 提示 脚本 运行 时 间 过 长 的 提示 框 ， 使 用 户 不 得 不 ! 
断 正 在 执行 的 处 理 。 为 了 解决 这 个 问题 , HTML 5 新 增 了 一 个 Web Workers API。 使 用 这 个 API, 
用 户 可 以 很 容易 地 创建 在 后 台 运 行 的 线程 (在 HTML 5 中 被 称 为 worker)， 如 果 将 可 能 耗费 较 
长 时 间 的 处 理 交 给 后 台 去 执行 的 话 ， 对 用 户 在 前 台 页 面 中 执行 的 操作 就 完全 没有 影响 了 。 
创建 后 台 线 程 的 步骤 十 分 简单 。 只 要 在 Worker 类 的 构造 器 中 ,将 需要 在 后 台 线 程 中 执行 
的 脚本 文件 的 URL 地 址 作为 参数 ， 然 后 创建 Worker 对 象 就 可 以 了 ， 例 如 下 面 的 代码 。 


T 


var worker-new Worker("worker.js"); 


需要 注意 在 后 台 线 程 中 是 不 能 访问 页 面 或 窗口 对 象 的 。 如 果 在 后 台 线 程 的 脚本 文件 中 使 


入 
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用 到 window 对 象 或 document 对 象 ， 则 会 引起 错误 。 另 外 ， 可 以 通过 发 送 和 接收 消息 来 与 后 


接收 消息 ， 例 如 下 面 的 代码 。 


人 台 线 程 互相 传递 数据 。 通 过 对 Worker 对 象 的 onmessage 事件 名 机 


worker.onme8sage=function(event) 


{ 
/处 理 收 到 的 消息 
j 


的 获取 可 以 在 后 台 线程 之 : 


使 用 Worker 对 象 的 postMessage 方法 来 对 后 台 线 程 发 送 消息 ， 如 下 例 所 示 。 发 送 的 消息 


是 文本 数据 ， 但 也 可 以 是 任何 JavaScript 对 象 。 


成 文本 数据 。 


worker.postMessage(message); 


需要 通过 JSON 对 象 的 stringify 方法 将 其 转换 


另外 ， 还 可 以 通过 获取 Worker 对 象 的 onmessage 事件 句柄 及 Worker 对 象 的 postMessage 


方法 在 后 台 线 程 内 部 进行 消息 的 接收 和 发 送 。 
下 面 通过 一 个 实例 讲解 使 用 WebWorkers API 让 耗 时 较 长 的 ; 


运算 在 后 台 运 行 的 方法 。 


实例 10-6 说 yj 
源码 路 径 daima\10\6.html 
功能 使 用 WebWorkers API 让 耗 时 较 长 的 运算 在 后 台 运 行 


编写 实例 文件 6.html， 此 文件 是 


用 户 在 该 文本 框 中 输入 数字 ， 然 后 
WE BRITA 1 到 给 定数 值 的 求 和 计算 只 需要 用 一 个 求 和 公 


中 , 为 了 展示 后 台 线 程 的 使 用 方法 ， 


<!DOCTYPE html> 
<html> 

<head> 

<meta charset="utf-8"> 


<script type="text/javascript"> 


function calculate() 


PER AKRI, din 


Za 
口 


用 HIML4 实现 的 。 在 上 述 代 码 中 放置 了 一 个 文本 框 ， 


计算 从 1 到 给 定数 值 的 合 


式 就 可 以 了 ， 但 在 本 示例 


采取 了 循环 计算 的 方法 。 文 件 6.html 的 实现 代码 如 下 。 


var num = parseInt(document.getElementById("num").value, 10); 


{ 
var result = 0; 
/循环 计算 求 和 
for (var i = 0; i <= num; i++) 
{ 
result += i; 
} 
alert" HEA" + result + "o 
} 
</script> 
</head> 
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<body> 

<hl> 从 1 到 给 定数 值 的 求 和 示例 </h1> 
输入 数值 :<input type="text" id="num"> 
<button onclick="calculate0"> 计 算 </button> 
</body> 

</html> 


执行 后 的 效果 如 图 10-6 所 示 。 


合计 值 为 55。 


图 10-6 执行 效果 


执行 上 述 代 码 时 ， 在 数值 文本 框 中 输入 数值 ， 单 击 计算 按钮 之 后 ， 并 在 弹出 合计 值 消 
息 框 之 前 ， 用 户 是 不 能 在 该 页 面 上 进行 操作 的 。 男 外 ,虽然 用 户 在 文本 框 中 输入 比较 小 的 
值 时 ， 不 会 有 什么 问题 ， 但 是 当 用 户 在 该 文本 框 中 输入 大 数字 时 ， 例 如 100 亿 时 ， 浏 览 器 
会 弹出 一 个 如 图 10-7 所 示 的 提示 脚本 运行 时 间 过 长 的 对 话 框 ， 导 致 不 得 不 停止 当前 计算 。 


() sile:///z:/ Qr v 


图 10-7 计算 大 数 时 
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接 下 来 新 建 一 个 HTML 5 页 面 ， 对 以 上 文件 重新 书写 , 使 用 WebWorkers API 让 耗 时 较 长 


的 运算 在 后 台 运 行 ， 这 样 在 上 例 的 文本 框 中 无 论 输入 多 么 大 的 数值 都 可 以 正常 运算 了 。 文 件 


6_1.html 是 对 上 例 进行 修改 后 的 HTML 5 代码 ， 具 体 代码 如 下 。 


<!DOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

«script type="text/javascript"> 

// 创建 执行 运算 的 线程 

var worker = new Worker("js6.js"); 

/接收 从 线程 中 传 出 的 计算 结果 

worker.onmessage = function(event) 

{ 
/消息 文本 放置 在 data 属性 中 ,可 以 是 任何 JavaScript 对 象 . 
alert(" 合 计 值 为 "+ event.data - "o "); 

5 

function calculate() 

í 
var num = parseInt(document.getElementById("num").value, 10); 
/将 数值 传 给 线程 
worker.postMessage(num); 

} 

</script> 

</head> 

<body> 

<hl> 从 1 到 给 定数 值 的 求 和 示例 </h1> 

输入 数值 :<input type="text" id="num"> 

«button onClick="calculate0"> 计 算 </button> 

</body> 

</html> 


脚本 文件 js6js 的 代码 如 下 。 


onmessage = fonction(event 

{ 
var num = event.data; 
var result = 0; 
for (var i = 0; i <= num; i++) 
result += i; 
/向 线程 创建 源 送 
postMessage(result); 


= 


消息 


} 


此 时 就 可 以 在 后 台 运 行 大 数 运算 的 操作 了 。 
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在 过 去 的 几 年 ， 智 能 手机 市 场 发 生 了 巨大 的 变化 ， 安 卓 手机 和 iPhone WAHIE. 4 
能 手机 系统 已 经 发 展 到 和 电脑 一 样 的 功能 ， 移 动 设 备 已 经 成 为 了 一 台 移 动 电脑 。 无 论 是 
在 大 街 小 埠 ， 还 是 上 下 班 的 地 铁 中 ， 总 有 很 多 人 在 用 手机 浏览 着 网 页 。 由 此 可 见 ， 设 计 
智能 手机 站 点 将 是 设计 师 们 的 一 块 大 蛋糕 。 本 节 简 单 介绍 为 Android 手机 设计 网 页 的 基 
本 知识 。 


111 搭建 开发 环境 


开发 人 员 都 很 希望 用 HTML. CSS 和 JavaScript 技术 来 构建 适用 于 Android 系统 的 应 用 程 
序 。 这 个 过 程 的 第 一 步 是 为 HTML 添加 有 亲和力 的 样式 ， 使 它们 更 像 移动 应 用 程序 。 在 实现 
这 个 功能 的 时 候 ， 用 户 可 以 将 CSS 样式 应 用 到 传统 的 HIML 网 页 上 ， 让 它们 在 Android 手机 
上 正常 浏览 。 


11.1.1 搭建 Android 开发 环境 


Android 工具 是 由 多 个 开发 包 组 成 的 ， 其 体 说 明 如 下 。 

O JDK: 可 以 到 网 址 http://java.sun.com/javase/downloads/index.jsp 处 下 载 。 

O Eclipse (Europa) : 可 以 到 网 址 http:/wwwo.eclipse.org/downloads/ 处 下 载 Eclipse IDE for 
Java Developers。 

口 Android SDK: 可 以 到 网 址 http://developer.android.com 处 下 载 。 

口 对 应 的 开发 插件 。 

因为 只 是 进行 静态 网 页 开发 ， 所 以 不 必 安 装 Java 环境 和 Eclipse 等 开发 工具 ， 只 需 安装 
Android SDK 即 可 。 安 装 Android SDK 的 步骤 如 下 。 

(1) 进入 Android 开发 者 社区 网 址 http://developer.android.com/， 然 后 转 到 SDK 下 载 页 面 
(笔者 安装 的 是 2.3 版 本 , 网 址 是 http://developer.android. com/sdk/2.3 rl/index.htmD , 如 图 11-1 
所 示 。 

(2) 在 此 选择 用 于 Windows 平台 的 “android-sdk r04-windows.zip”， 下 载 页 面 如 图 11-2 
所 示 。 


developers 


Home 


Android SDK Starter Package | 


Download 
Installing 


Downloadable SDK Components 
Adding SDK Components 
Android 2.0.1 Platform new! 
Android 1.6 Platform new! 
Android 1.5 Platform 
Older Platforms 


SDK Tools, r4 new! 
USB Driver for Windows, r2 
ADT Plugin for Eclipse 
Installing and Updating 
ADT 0.8.5 new! 
Native Development Tools 
Android 1.6 NDK, r1 


More Information 


SDK System Requirements 
SDK Terms and Conditions 
SDK Release Notes 


Home Dev Guide Reference 


“| HTML 5 开发 从 入 门 到 精通 


Blog Videos 


Download the Android SDK 


December 2009 


The Android SDK has changed! If youve worked with the Android SDK before, you will notice several impo 
show more 


If you are new to the Android SDK, please read the Quick Start, below, for an overview of how to install and « 
Ur >r 
Windows android-sdk_((J4-windows. zip 23069119 bytes c48b407de852ba483859f17337e90997 
Mac OS X (intel) androidsdk_rm4-mac 86 zip 19657927 bytes b08512765aa9b0369bb9b8fecdf763e3 


Linux (i385) android-sdk r04-linux BB.tgz 15984887 bytes efaG4büBfd9daB4fAc4ae77554fe4eaee 


图 11-1 SDK 下 载 页 


Blog Videos Community 


Android SDK Starter Package 1.1 The Android Software Development Kit (referred to in this License Agreement as the “SDK” and specifically including the Android system files, packaged 


APIs, and Google APIs add-ons) is licensed to you subject to the terms of this License Agreement. This License Agreement forms a legally binding contract 


pennas between you and Google in relation to your use of the SDK. 
Downloadable SDK Components 1.2 "Google" means Google Inc., a Delaware corporation with principal place of business at 1800 Amphitheatre Parkway, Mountain View, CA 94043, United States. 


Adding SDK Components 


Android 2.0.1 Platform new! 2. Accepting this License Agreement 


Android 1.6 Platform new! 


Android 1.5 Platform 2.1 In order to use the SDK, you must first agree to this License Agreement. Tou may not use the SDK if you do not accept this License Agreement. 


Older Platforms 
SDK Tools, r4 new! 
USB Driver for Windows, r2 


2.2 You can accept this License Agreement by: 


(A) clicking to accept or agree to this License Agreement, where this option is made available to you; or 


ADT Plugin for Eclipse 


Installing and Updating (B) by actually using the SDK. In this case, you agree that use of the SDK constitutes acceptance of the Licensing Agreement from that point onwards. 


ADT 0.9.5 new! 


° 2.3 You may not use the SDK and may not accept the Licensing Agreement if you are a person barred from receiving the SDK under the laws of the United States 
Native Development Tools or other countries including the country in which you are resident or from which you use the SDK. 


Android 1.6 NDK, r! 


" 2.4 If you are agreeing to be bound by this License Agreement on behalf of your employer or other entity, you represent end warrant that you have full legal 
More Information authority to bind your employer or such entity to this License Agreement. If you do not have the requisite authority, you may not accept the Licensing 


il 


SDK System Requirements 
SDK Terms and Conditions 
SDK Release Notes 

SDK Archives 


图 11-2 Android SDK FTI 


(3) 选中 “TI agree to the terms of the Android SDK License Agreement” 复 选 框 ， 


“Download” 按 钮 开始 下 载 。 


单 击 


(4) 下 载 完 成 后 解压 缩 文件 ， 假 设 下 载 后 的 文件 解压 存放 在 “F:android” 目 录 下 ， 打 开 
此 目录 找到 文件 “SDK Manager.exe”， 如 图 11-3 所 示 。 


add-ons docs extras 
Platforms platform-tools samples 
temp tools tools-fuzhi 
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SDK Readme. txt 
文本 文档 


a 


1X 


图 11-3 SDK Manager.exe 
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(5) 双击 打开 文件 “SDK Manager.exe”， 打 开 的 “Android SDK and AVD Manager” 界 面 ， 
如 图 11-4 所 示 。 


+ Android SDK and AVD Hanag: 


igi xj 


API Level RU 
ARM (armeabi 


Ea E 


"v A valid Android Virtual Device. RA À repairable Android Virtual Device. 


X An Android Virtual Device that failed to load. Click Details’ to 


see the error. 


图 11-4 “Android SDK and AVD Manager” Jf 


(6) 选择 一 个 Android 版 本 ， 然 后 单 击 “Start” 按 钮 开始 运行 这 个 模拟 器 ， 笔 者 选择 的 是 
2.3 版 本 。 模 拟 器 的 运行 效果 如 图 11-5 所 示 。 
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图 11-5. 模拟 运行 成 功 
11.1.2 ”搭建 网 页 运行 环境 


搭建 开发 环境 比较 简单 ， 只 需要 有 De 可 。 做 好 的 网 页 上 传 到 空间 中 ， 然 后 
保证 在 Android 模拟 器 中 上 网 浏览 这 个 网 页 即 可 。 了 的 用 户 本 来 就 有 自己 的 网 站 ， 也 有 
的 没有 。 没 有 的 用 户 可 以 申请 一 个 免费 的 空间 。 和 例如 网 址 
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He d 


http://www.3v.cm/., Hii 
(1) 


间 的 基 
登录 网 址 http://www.3v.cm/， 如 图 11-6 所 示 。 


本 流程 如 下 。 


人 3 了 vc 


首页 立即 注册 
”您 当前 的 位 置 : 免费 空间 -> 首页 


Ki o 


EIN NN 
口 共有 注册 会 员 : 217082 

c 今天 注册 会 员 : 678 

口 当前 在 线 会 员 : 14524 

c 最 新 注册 会 员 : HE 


图 
(2) 单 击 左 侧 的 “注册 ”按钮 来 


(3) 单 击 “ 我 同意 ”按钮 后 ， 来 
FSF [ 选择 用 户 名 、 


RP: * 检测 用 户 名 | (请 使 用 3-12 个 英文 字母 或 数字 或 -， 可 任意 组 合 ) 
[EREM z] * RHEE PrissiB ERR SY 


空间 类 型 : 


用 户 名 : » 3: 
= MW: T 
xp: 073 gg: 
Cookie: | 不 保存 ” 国 Pam 
( > 38 ) (prit ) R 
TESE? KHEN Siak 

» 帮助 : 


C 


设 为 首页 | 


新 闻 资 讯 


免费 空间 RAZA 。 ”主页 列表 


免费 空间 开启 二 级 域名 功能 (2011-8-27) 
加 盟 代理 ， 让 您 轻松 月 赚 过 万 ! (2008-6-28) 
免费 空间 用 户 如 何 开通 收费 空间 (2010-6-3) 
免费 空间 如 何 上 传 文件 (2010-5-25) 
我 司 免费 空间 介绍 及 申请 方法 (2010-5-25) 
免费 空间 用 户 如 何 绑 定 顶级 域名 9 (2010-4-27) 


关键 宁 :| 搜索 
11-6 登录 http://www.3v.cm/ 


到 服务 条 球 页 
到 填写 用 户 


空间 类 型 


支付 方式 


加 入 收藏 | “ 联系 我 们 


友 篆 链接 


me | em | 


网 站 名 称 : 个 人 主页 


网 站 简介 : 在 此 输入 您 的 网 
站 简介 . .. 


推荐 等 级 : 元 元 


如 图 11-7 所 示 。 


下 一 步 
图 11-7 填写 用 户 名 界面 
(4) 填写 完毕 后 单 击 “ 下 一 步 ” 按 钮 ， 再 在 填写 信息 界面 填 
帐号 信息 
用 户 名 : qqdsadsad 
密码 安全 性 : 
£ B: *《 6-12 位 ， 区 分 大 小 写 ) 
确认 密码 : * 
密码 问题 : | 1 * (hn: fFEE60 A Bib) 
LJ —— ra Nena) 
基本 资料 
真实 姓名 : * 
t 别 : ERES. 
出 生日 期 : | ”4 劣 必 使 用 IE 浏 览 器 ,否则 有 可 能 无 法 正常 显示 
qi: [ 
电子 邮箱 : | ARRERA SHREE ) 
网 站 信息 
网 站 名 称 * 
网 站 分 类 : MER wj. 
ERS EBORE RA EJ 
网 站 介绍 : 
E] 旦 议 6o 字 以 内 )> 
Xu: 站 79 08 (验证 码 ,看 不 清 楚 ? 请 点 击 剧 新) 


1 写 注册 信息 ， 如 图 11-8 所 示 。 
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VR] 


递交 重 填 
11-8 JAHN GS RJ 


(5) 填写 完毕 后 单 击 “ 递 
11-9 所 示 。 


| 控制 面板 


收费 空间 
帐户 信息 
更 改 资料 
更 改 密码 
空间 统计 
我 的 推荐 
我 的 好 友 
文件 管理 
AZIE 
FTP 管 理 
留言 设置 
有 问 必 答 
站 内 短信 
在 线 充值 
付费 确认 
财务 记录 
退出 登录 
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Dv» 


x 


按钮 完成 注册 ， 在 注册 中 心 界面 可 以 管理 自己 的 空间 ， 如 


| guanxijing , 欢迎 登录 会 员 中 心 ， 今 天 是 : 2011 年 10 月 12 日 星期 三 


@, [2010-7-30 15:33:21] 帮助 : 免费 空间 如 何 上 传 文件 


v 虚拟 主机 控制 面板 


您 可 以 自由 操作 您 的 虚拟 主机 


帐户 信息 
BP: guenxi jing 
帐户 金额 : 消费 : ¥ 0 元 剩余 : ¥0 元 
帐户 积分 : 消费 : 0 点 剩余 : 0 点 
用 户 类 别 : 免费 用 户 升级 到 收费 用 户 查看 收费 空间 详情 
空间 类 型 : 免费 空间 
空间 容量 : 100M 
注册 日 期 : 2011-10-12 
使 用 期 限 : 无 限制 
登陆 次 数 : 3 
上 次 登陆 时 间 : 2011-10-12 19:17:35 
上 次 登陆 IP : 124. 128. 126. 52 
网 站 名 称 : 1223 
网 站 域名 : http: //guanxi jing. 35free. net 


图 


11-9 用 户 中 心 界 面 


(6) 单 击 左 侧 的 “FTP 管理 ”链接 更 改 FTP 


密码 ， 并 且 可 以 查看 空间 的 人 P 
所 示 。 


的 界面 
所 示 。 根据 图 


的 上 传 工具 上 传 编写 的 程序 文件 。 


地 址 ， 如 图 11-10 


mm 


FTF 服 务 器 : 221.1.217.92 UM 
APZ: gaanxijing 
(7) 单 击 左 侧 的 “文件 管理 ”链接 ， 在 弹出 ss =a 
中 可 以 在 线 管理 空间 中 的 文件 ， 如 图 11-11 i [ ——  — — 
11-11 中 的 资料 ， 用 户 可 以 用 专业 Bed 
F 图 11-10 FTP 管理 
当前 位 置 : [reaanxijinay IBER: | 苇 到 


全 选 目 录 | 取消 选择 | MEAR 全 选 文件 | 取消 选择 | ”上传 文件 


T. C) images 
共 í 个 目录 


总 9 个 文件 ,30 个 /页 第 1 页 , 共 1 页 ， 上 一 页 ,下 一 页 , 转 到 第 |! F] 页 


改名 Hs 名 称 Ë 作 大 小 更 改 日 期 
口 2] ns stre DS STORE 文件 编辑 改名 WER 路 径 6.00 KB 2011-10-12 18:44:20 
r 8... js JScript Script 文件 ”编辑 改名 删除 路径 。 70.48 KB 2011-10-12 18:44:18 
r aaa. png ES 图 像 编辑 改名 MER 路径。 6.71 KB 2011-10-12 19:06:40 
DD al adroid css 层 得 样式 表 文档 ”编辑 改名 MER 路 径 1.81 KB 2011-10-12 18:44:15 
r Bas js JScript Script 文件 ”编辑 改名 删除 路 径 。 369 FP 2011-10-12 18:44:14 
口 3 be. jp E 图 像 SE 改名 MR BE 4.52 KB 2010-9-17 8:12:46 
Do» desktop. css BARRENS RE 改名 删除 路 径 133 FP 2011-10-12 18:44:13 
D a xplorer. css BARREG RE 改名 删除 路径 ”201 FP 2011-10-12 18:44:12 
口 £) index.html HTML Document 编辑 改名 MER 路 径 — 2.26 KB 2011-10-12 18:43:51 


空间 容量 : 100M, 已 用 空间 : 10173 KB, 当前 目录 : 共 9 个 文件 , 约 92.47 KB 


免费 空间 版 权 所 有 2004-2005. All Rights Reserved webmaster@3vi deo. cn 


图 11-11 文件 管理 


单 击 每 一 个 文件 的 “路 径 ”链接 ， 都 可 以 获取 这 个 文件 的 URL 地 址 ， 这 样 在 Android + 
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机 中 就 可 以 用 这 个 URL 来 访问 此 文 伯 


11.2. 先 看 一 段 代码 


下 面 通过 一 个 实例 讲解 实现 一 个 简单 的 HTML 网 页 的 方法 。 


， 查 看 此 文件 在 Android 手机 中 的 执行 效果 。 


FE 


实例 11-1 说 明 
源码 路 径 daimaM 1\first\ 
功能 一 个 简单 的 HTML 网 页 


11.2.1 ”实现 主页 
主页 文件 index.html 的 源 代 码 如 下 。 


<html> 
<head> 
<title>aaa</title> 
<link rel="stylesheet" href-"desktop.css" type="text/css" /> 
<body> 
<div id="container"> 
<div id="header"> 
<h1><a href="./">AAAA</a></h1> 
<div id="utility"> 
<ul> 
<li><a hre 伍 "about.html"> 关 于 我 们 </a></li> 
<li><a hre 伍 "blog.html"> 博 客 </a></li> 
<li><a hre 人 "contact.html"> 联 系 我 们 </a></li> 
</ul> 
</div> 
«div id="nav"> 
<ul> 
<li><a href="bbb.html">Android Z X</a></li> 
<li><a href-"ccc.html" Fa i5 3c Fpe</a></li> 
<li><a hre 全 "ddd.html"> 在 线 客服 </a></li> 
<li><a hre 伍 "http:/www.aaa.com"> 在 线 视频 </a></li> 
</ul> 
</div> 
</div> 
<div id="content"> 
<h2>About</h2> 
<p> 欢 迎 大 家 学 习 Android， 都 说 这 是 一 个 前 途 辉 煜 的 职业 ， 我 也 是 这 么 是 认为 


的 ， 和 希望 事实 如 此 …</p> 
</div> 
«div id="sidebar"> 
«img al 全 "好 图 片 " src="aaa.png'> 
<p> 欢 迎 大 家 学 习 Android， 都 说 这 是 一 个 前 途 辉 煌 的 职业 ， 我 也 是 这 么 是 认为 
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的 ， 和 希望 事实 如 此 .…</p> 
</div> 
<div id="footer"> 
<ul> 
<li><a href="bbb.html">Services</a></li> 
<li><a href="ccc.html">About</a></l> 
<li><a href="ddd.html">Blog</a></li> 
</ul> 
«p class="subtle"> 学 习 HTML 5</p> 
</div> 
</div> 
</body> 
</html> 


民 据 “样式 和 表现 相 分 离 ” 的 原则 ， 用 户 需要 单独 写 一 个 CSS 文件 ， 通 过 这 个 CSS 文件 
来 修饰 上 述 这 个 网 页 ， 修 饰 的 最 终 目 的 是 能 够 在 Android 手机 上 浏览 。 

在 现实 中 开发 应 用 时 ， 最 好 将 桌面 浏览 器 的 样式 表 和 Android 样式 表 划 清 界 限 。 建 议 写 
两 个 完全 独立 的 文件 。 当 然 还 有 另 一 种 做 法 是 把 所 有 的 CSS 规则 放 到 一 个 单一 的 样式 表 
但 是 这 种 做 法 不 值得 提倡 ， 这 是 因为 文件 太 长 了 束 显 得 麻烦 ， 不 利于 维护 。 如 果 把 太 多 不 相 
关 的 上 曲面 样式 规则 发 送 到 手机 上 ， 这 会 浪费 一 些 宝贵 的 带宽 和 存储 空间 。 


11.2.2 ”编写 CSS 文件 
接 下 来 开始 写 CSS 文件 ， 为 了 适用 于 Android 系统 ， 写 下 面 link 标签 。 


<link rel="stylesheet" type="text/css" 

href-"android.css" media-"only screen and (max-width: 480px)" /> 
<link rel="stylesheet" type="text/css" 

href="desktop.css" media="screen and (min-width: 481px)" /> 


在 上 述 代码 中 ， 最 明显 的 变动 是 浏览 器 宽度 的 变化 ， 即 ; 


max-width: 480px 
min-width: 481px 


这 是 因为 手机 屏幕 的 宽度 和 电脑 屏幕 的 宽度 是 不 一 样 的 (当然 长 度 也 不 一 样 ， 但 是 都 具 
有 下 拉 功 能 ) ，480 像素 (px) 是 Android 系统 的 标准 宽度 ， 上 述 代码 的 功能 是 不 管 浏 览 器 的 
窗口 是 多 大 ， 桌 面 用 户 看 到 的 都 是 文件 desktop.css 中 样式 修饰 的 页 面 ， 宽 度 都 是 用 如 下 代码 
设置 的 宽度 。 


max-width: 480px 
min-width: 481px 


T 


上 述 代 码 中 有 两 个 CSS 文件 ， 一 个 是 desktop.css， 此 文件 是 在 开发 电脑 页 面 时 编写 的 样 
式 文件 ， 就 是 为 这 个 HTML 页 面 服务 的 。 而 文件 Android.css 是 一 个 新 文件 ， 也 是 本 章 将 要 i 
解 的 重点 ， 通 过 这 个 Android.css， 可 以 将 上 面 的 计算 机 网 页 显示 在 Android 手机 中 。 当 读者 
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文 件 o 


此 时 在 Chrome 浏览 器 中 来 浏 oe 改 后 的 HTML x! 


开发 出 完整 的 Android.css 后 , 可 以 直接 在 HTML 文件 


T 


<link rel="stylesheet" type="text/css" 


href="desktop.css" media="screen and (min-width: 481px)" /> 


4 


FE 


不 管 从 Android 手机 浏览 器 还 


将 如 下 代码 删除 ， 即 不 再 用 这 个 修饰 


从 PC 机 浏览 器 ， 执 行 后 都 将 得 到 一 个 完整 的 页 面 展示 。 此 时 的 完整 代码 如 下 。 
<html> 
<head> 

<title>AAAA</title> 

<link rel="stylesheet" type="text/css" href}="android.css" media-"only screen and (max-width: 
480px)" /> 

<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 
481px)" > 


xE 


FA 


<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="explorer.css" media="all" /> 
<![endif]--> 
<script type="text/javascript" sre="jquery.js"></script> 
<script type-"text/Javascript" src="android.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=gb1212"> 
</head> 
<body> 
<div id="container"> 
<div id="header"> 
<h1><a href="./">AAAA</a></h1> 
«div id="utility"> 
<ul> 
<li><a href="about.html"> 关 于 我 们 </a></li> 
<li><a hre 伍 "blog.html"> 博 客 </a></li> 
<li><a href="contact.html"> 联 系 我 们 </a></li> 
</ul> 
</div> 
<div id="nav"> 
<ul> 
<li><a href="bbb.html">Android Z X</a></li> 
<li><a hre 人 "ccc.html"> 电 话 支持 </a></li> 
<li><a href="ddd.html"> 在 线 客服 </a></li> 
<li><a href-"http://www.aaa.com' 7E £X AUi /a-«/li 
</ul> 
</div> 
</div> 
<div id="content"> 
<h2>About</h2> 
<p> 欢 迎 大 家 学 习 Android, AWE AMEEN, det ie A E 


SE B p... p 
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</div> 
«div id="sidebar"> 
«img al 人 "好 图 片 " src="aaa.png"> 
<p> 欢 迎 大 家 学 习 Android， 痢 说 这 是 一 个 前 途 辉 焊 的 职业 ， 我 也 是 这 么 是 认为 


的 ， 希 望 事实 如 此 .…</p> 


</div> 
<div id="footer"> 
<ul> 
<li><a href="bbb.html">Services</a></li> 
<li><a href="ccc.html">About</a></li> 
<li><a href="ddd.html">Blog</a></li> 
</ul> 
<p class="subtle"> 学 习 HTML 5</p> 
</div> 
</div> 
</body> 
</html> 
</html> 
desktop.css 的 代码 如 下 。 
For example: 
body í 
margin:0; 
padding:0; 
font: 75% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; 
} 
执行 效果 如 图 11-12 所 示 。 
AAAA 
i AT Rf] 
。 联系 我 们 
。 Android 之 家 
。 AEX 
。 在 线 客服 
About 


e About i 
e Blog 
学 习 HTIL 5 El 


图 11-12 执行 效果 
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11.2.3 ”实现 页 面 自动 缩放 

浏览 器 “很 认 死 理 ”， 除 非 用 户 明 确 “ 告 诉 ”Android 浏览 器 ， 否 则 它 会 认为 页 面 宽度 是 
980 像素 。 当 然 这 在 大 多 数 情况 下 能 工作 得 很 好 ， 因 为 计算 机 已 经 适应 了 这 个 宽度 。 但 是 如 果 
针对 的 是 小 尺寸 屏幕 的 Android 手机 ， 必 须 做 一 些 调整 ， 必 须 在 HTML 文件 的 Chead) 元 素 
里 加 一 个 viewport 的 元 标签 ， 让 移动 浏览 器 知道 屏幕 大 小 。 


«meta name="viewport" content-"user-scalable-no, width-device-width" /> 


这 样 就 实现 了 屏幕 的 自动 缩放 ， 可 以 根据 显示 屏 的 大 小 带 给 用 户 不 同 大 小 的 显示 页 面 。 用 
户 无 需 担心 加 上 viewport 后 在 计算 机 上 的 显示 影响 ， 因 为 桌面 浏览 器 会 忽略 viewport 元 标签 。 

如 果 不 设置 viewport 的 宽度 ， 页 面 在 加 载 后 会 缩小 。 我 们 不 知道 缩放 的 大 小 是 多 少 ， 因 
为 Android 浏览 器 的 设置 项 允许 用 户 设置 默认 缩放 大 小 。 选 项 有 “大 ”、“ 中 ”默认 ) 、 
“小 ”。 即 使 设置 过 viewport 宽度 ， 这 个 设置 项 也 会 影响 页 面 的 缩放 大 小 。 


11.3 添加 Android 的 (SS 


下 面 接着 上 一 节 的 演示 代码 继续 讲解 ， 前 面 代 码 中 的 android.css 一 直 没 用 ， 接 下 来 将 开 
始 编写 这 个 文件 ， 目 的 是 使 用 户 的 网 页 在 Android 手机 上 完美 显示 。 
1131 编写 基本 的 样式 

所 谓 的 基本 样式 是 指 诸如 背景 颜色 、 文 字 大 小 和 颜色 等 样式 ， 在 上 一 节 实 例 的 基础 上 继 
续 扩 展 ， 有 具体 实现 流程 如 下 。 

(1) 在 文件 android.css 中 设置 <body> 元 素 的 如 下 基本 样式 。 


body { 
background-color: #ddd; /* RAE r */ 
color: #122; /* 字体 颜色 */ 


font-family: Helvetica; /* 字体 */ 

font-size: 14px; /* 字体 大 小 */ 

margin: 0; TQ SERE 

padding: 0; [* 内 边 距 */ 
j 


(2) 开始 处 理 <header> 中 的 <div> 内 容 ， 它 包含 主要 入 口 的 链接 〈 也 就 是 logo? 和 一 级 、 
二 级 站 点 导航 。 第 一 步 是 把 logo 链接 的 格式 调整 得 像 可 以 单 击 的 标题 栏 ， 在 此 需要 将 下 面 的 
代码 加 入 到 文件 android.css 中 。 


#header h1 í 
margin: 0; 
padding: 0; 

} 

#header hl a í 


258 HH 


第 11 章 在 Android 手机 中 使 用 HTML 5 ` 


background-color: #ccc; 
border-bottom: 1px solid #666; 
color: #122; 

display: block; 

font-size: 20px; 

font-weight: bold; 

padding: 10px 0; 

text-align: center; 


text-decoration: none; 


(3) 用 同样 的 方式 格式 化 一 级 和 二 级 导航 的 <ul> 元 素 。 在 此 只 需 用 通用 的 标签 选择 器 (也 
就 是 #header uD) 就 够 用 了 ， 不 必 再 设置 标签 <ID>， 也 就 是 不 必 设 置 诸 如 下 面 的 样式 了 。 

口 #header ul 

L] #utility 

口 #header ul 

DD Znav 

此 步骤 的 代码 如 下 。 


#header ul í 
list-style: none; 


margin: 10px; 
padding: 0; 

j 

#header ul li a { 
background-color: ZFFFFFF; 
border: 1px solid 4999999; 
color: #121212; 
display: block; 
font-size: 17px; 
font-weight: bold; 
margin-bottom: -1px; 
padding: 12px 10px; 
text-decoration: none; 


j 


Í 


(4) 给 content 和 sidebar div 加 点 内 边 距 ， 让 文字 到 屏幕 边缘 之 间 空 出 点 距离 。 代 码 如 下 。 


#content, #sidebar í 
padding: 10px; 
j 


(5) 接 下 来 设置 <footer> 中 内 容 的 样式 ，<footer> 里 面 的 内 容 比较 简单 ， 只 需 将 display ix 
EN none 即 可 。 其 代码 如 下 。 


#footer { 


EN 259 


HTML 5 开发 从 入 门 到 精通 
display: none; 
) 
将 上 述 代 码 在 计算 机 中 执行 的 效果 如 图 11-13 所 示 。 在 Android 中 的 执行 效果 如 图 11-14 
所 示 。 


在 线 视频 


Menu 


About 
实 如 此 . .. . About 


欢迎 大 家 学 习 Android ， 都 说 这 是 一 个 前 途 辉 煌 
的 职业 ， 我 也 是 这 么 是 认为 的 ， 希 望 事 实 如 此 …. 


有 实 如 此 . .. @ 


欢迎 大 家 学 习 Android ， 都 说 这 是 一 个 前 途 辉 煌 
的 职业 ， 我 也 是 这 么 是 认为 的 ， 希 望 事 实 如 此 …. 


学 习 HTIL 5 


图 11-13 计算 机 中 的 执行 效果 图 11-14 在 Android 中 的 执行 效果 
因为 添加 了 自动 缩放 ， 并 且 添 加 了 修饰 Menu 的 样式 ， 所 以 整个 界面 看 上 去 很 美 。 


11.3.2 ”添加 视觉 效果 

为 了 使 页 面 变 得 精彩 ， 用 户 可 以 尝试 加 一 些 充 满 视 觉 效 果 的 样式 。 

(1) 给 <header> 文 字 加 1 像素 (px) 向 下 的 白色 阴影 ， 背 景 加 上 CSS 渐变 效果 。 具 体 代 码 
如 下 。 


#header hl a í 

text-shadow: 0px 1px 1px #fff; 

background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)); 
} 


对 于 上 述 代 码 有 两 点 说 明 。 

口 text-shadow 声明 : 参数 从 左 到 右 分 别 表示 水 平 偏 移 、 垂 直 偶 移 、 模 糊 效果 和 颜色 。 在 
大 多 数 情况 下 ， 可 以 将 文字 设置 成 上 面 代 码 中 的 数值 ， 这 在 Android 界面 中 的 显示 效 
果 也 不 错 。 在 大 部 分 浏览 器 上 ， 将 模糊 范围 设置 为 0 像素 也 能 看 到 效果 。 但 Andorid 
要 求 模 糊 范围 最 少 是 1 像素 ， 如 果 设 置 成 0 像素 ， 则 在 Android 设备 上 将 显示 不 出 文 
字 的 阴影 。 

O webkit-gradient: 功能 是 让 浏览 器 在 运行 时 产生 一 张 渐变 的 图 片 。 因 此 ， 可 以 把 CSS 
渐变 功能 用 在 任何 平常 指定 图 片 ( 比 如 背景 图 片 或 者 列表 式 图 片 ) url 的 地 方 。 参 数 从 
左 到 右 的 排列 顺序 分 别 是 ， 渐变 类 型 (可 以 是 linear 或 者 radial 的 ) 、 渐 变 起 点 (可 以 

Æ left top. left bottom. right top 或 者 right bottom)、 渐 变 终 点 、 起 点 颜色 、 终 点 颜 


[= 
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注意 : 在 赋值 时 ， 不 能 颠倒 描述 渐变 起 点 、 终 点 常量 (left top. left bottom. right top. right 
bottom) 的 水 平和 垂直 顺序 。 也 就 是 说 top left. bottom left. top right 和 bottom right 是 不 合法 
的 值 。 

(2) 给 导航 荣 单 加 上 圆 角 样式 ， 代 码 如 下 。 


#header ul li:first-child a í 
-webkit-border-top-left-radius: 8px; 
-webkit-border-top-right-radius: 8px; 


j 

#header ul li:last-child a í 
-webkit-border-bottom-left-radius: 8px; 
-webkit-border-bottom-right-radius: 8px; 


I 
上 述 代码 使 用 -webkit-border- radius 属性 描述 角 的 方式 ， 定 义 列表 第 一 个 元 素 的 上 两 个 角 和 
最 后 一 个 元 素 的 下 两 个 角 为 以 8 像素 为 半径 的 圆 角 。 此 时 在 Android 中 的 执行 效果 如 图 11-15 
所 示 。 


关于 我 们 


博客 
联系 我 们 
Android 之 家 
电话 支持 

在 线 客服 


在 线 视频 


图 11-15 在 Android 中 的 执行 效果 
此 时 会 发 现 列表 显示 样式 变 为 了 圆 角 样 式 ， 整 个 外 观 显得 更 加 圆滑 和 自然。 


11.4 添加 Javascript 


经 过 前 面 的 步骤 ， 一 个 基本 的 HTML 页 面 就 设计 完成 了 ， 并 且 这 个 页 面 可 以 在 Android 
手机 上 完美 显示 。 为 了 使 页 面 更 加 完美 , 接 下 来 将 详细 讲解 在 上 述 页 面 中 添加 JavaScript 行为 
特效 的 基本 知识 。 


11.4.1 jQuery 框架 介绍 
jQuery 是 继 prototype 之 后 又 一 个 优秀 的 JavaScript 框架 。 它 是 轻 量 级 的 js Æ kiia 
只 有 21KB) ， 它 兼容 CSS3， 还 兼容 各 种 浏览 器 。jQuery 使 用 户 能 更 方便 地 处 理 HTML 
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documents、events， 实 现 动画 效果 ， 


方便 地 为 网 站 提供 Ajax 交互 。jQuery 还 有 


较 大 的 优势 是 , 它 的 文档 说 明 很 全 , 而且 各 种 应 用 也 说 得 很 详细 


š 语 Blk 


可 供 选择 。jQuery 能 够 使 用 户 的 HTML 页 面 保持 代码 和 HTML 内 容 分 离 ， 也 就 是 说 ， 
Hes HTML 里 面 插入 一 堆 js 来 调用 命令 了 ， 只 需 定 义 ID 即 可 。 


个 比 


， 同 时 还 有 许多 成 熟 的 插件 


不 用 


i 的 语法 是 为 HTML 元 素 的 选取 编制 的 ， 可 以 对 元 素 执行 某 些 操作 。 基 础 语法 格式 


如 下 。 
$(selector).action() 


O 美元 符号 : 定义 jQuery。 
口 选择 符 (selector) : “查询 ”和 “查找 ”HTML 元 素 。 
口 * jQuery 的 action0: 执行 对 元 素 的 操作 。 
例如 下 面 的 代码 : 
$(this).hide() /隐藏 当前 元 素 
$("p").hide0// 隐 藏 所 有 有 段落 


$("'p.test").hide0// 隐 藏 所 有 class="test" 的 段落 
$("#test").hide0O// 隐 茂 所 有 id="test” 的 元 素 


2. 简单 应 用 


下 面 通过 一 段 简单 的 代码 ， 让 读者 认识 jQuery 的 强大 功能 。 具 体 代码 如 下 。 


<html> 
<head> 
«script type-"text/Javascript" src="/jquery/jquery.Js"></script> 
«script type-"text/javascript' 
$(document).ready(function() í 
$("button").click(function() í 
$("#test").hide(); 
J 
» 
</script> 
</head> 


<body> 

<h2> This is a heading</h2> 

«p? This is a paragraph.</p> 

«p id="test">This is another paragraph.</p> 
«button type-"button"^Click me</button> 
</body> 


</html> 


F 述 代码 演示 了 jQuery 中 hide0 函 数 的 基本 用 法 ， 功 能 是 隐 
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藏 了 当前 的 HTML 元素 。 


执 


行 效果 如 


括 这 个 按钮 ， 此 时 页 面 一 片 衬 


Z] 


注意 : 
读者 可 以 参阅 其 他 书籍 或 网 上 教程 。 


11.4.2 


具体 实践 
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11-16 所 示 ， 只 显示 一 个 按钮 。 单 击 这 个 按钮 后 ， 会 隐藏 所 有 的 HTML 元 素 ， 包 


本 书 的 重点 XR jQuery, 所 以 不 再 对 其 使 用 知识 进行 讲解 。 Click me | 


图 11-16 未 被 隐藏 时 


接 1 元 素 , 让 页 面 支持 一 些 基 本 的 动态 行为 。 (E. 
体 实 现 的 时 候 ， 当 然 是 基于 前 面 介绍 的 jQuery 框架 。 具 体 要 做 的 是 ， 让 用 户 控 


制 是 否 显示 页 


面 顶部 那个 太 引 人 注目 的 导航 栏 ， 这 样 用 户 可 以 只 在 想 看 的 时 候 去 看 。 有 具体 的 实现 流程 如 - Ps 
(1) 隐藏 <header> 中 的 <ul> 元 素 ， 让 它 在 用 户 第 一 次 加 载 页 面 之 后 不 会 显示 出 来 。 具 体 代 


码 如 下 。 


#header ul. hide{ 
display: none; 


) 


(2) 定义 显示 和 隐藏 菜单 的 按钮 ， 代 码 如 下 。 


定义 


整 CSS 样 


«div class=” leftButton" onclick= “toggleMenu() “>Menu< / div> 


个 带 有 


个 带 有 leftButton 类 的 <div> 元 素 ， 它 将 被 放 在 header 里 面 。 下 面 是 这 个 按钮 的 完 


式 代码 。 


#header div.leftButton í 


j 


position: absolute; 

top: 7px; 

left: 6px; 

height: 30px; 

font-weight: bold; 

text-align: center; 

color: white; 

text-shadow: rgba (0,0,0,0.6) Opx -1px 1px; 
line-height: 28px; 

border-width: 0 8px 0 8px; 
-webkit-border-image: url(images/button.png) 0 8 0 8; 


上 述 代码 的 说 明 如 下 。 


口 position: absolute: 从 顶部 开始 ， 设 置 position 为 absolute， 相 当 于 把 这 个 <div> 元 素 从 
HTML 文件 流 中 去 掉 ， 从 而 可 以 设置 自己 的 最 上 面 和 最 左面 的 坐标 。 

口 height: 30px: 设置 高 度 为 30 像素 。 

T font-weight: bold: 定义 文字 格式 为 粗 体 , 白色 带 有 一 点 向 下 的 阴影 , 在 元 素 里 居中 显示 。 

O text-shadow: rgba: rgb(255, 255, 255) rgb(100%, 10096, 10096)#I#FFFFFF 一 个 原 


理 


I5 


都 是 表示 颜色 的 。 在 rgba0 函 数 中 , 它 的 第 4 个 参数 用 来 定义 alpha 值 ( 透 明度) ， 
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取 值 范围 从 0 到 1。 其 中 0 表示 完全 透明 ，! 表示 完全 不 透明 ，0 到 1 之 间 的 小 数 表示 
不 同 程度 的 半 透 明 

Q line-height: 把 元 素 中 的 文字 往 下 移动 的 距离 ， 使 之 不 会 和 上 边框 齐 平 。 

O border-width 和 -webkit-border-image: 这 两 个 属性 一 起 决定 把 一 张 图 片 的 一 部 分 放 入 某 
一 元 素 的 边框 中 去 。 如 果 元 素 大 小 由 于 文字 的 增 减 而 改变 ， 图 片 会 自动 拉 伸 适应 这 样 
的 变化 。 这 一 点 其 实 很 有 用 ， 意 味 着 只 需要 不 多 的 图 片 、 少 量 的 工作 、 低 带宽 和 更 少 
的 加 载 时 间 。 

口 border-width: 让 浏览 器 把 元 素 的 边框 定位 在 距 上 0 像素 、 距 右 8 像素 、 距 下 0 像素 、 
IEZ 8 像素 的 地 方 〈4 个 参数 从 上 开始 ， 以 顺 时 针 为 序 ) 。 不 需要 指定 边框 的 颜色 和 
样式 。 边 框 宽 度 定义 好 之 后 ， 吕 3 要 确定 放 进 去 的 图 片 了 。 

口 url(images/button.png) 0 808: 5 个 参数 从 左 到 右 分 别 是 : 图 片 的 URL、 上 边 距 、 右 边 

距 、 下 边 距 、 左 边 距 《〈 再 一 次 ， 从 上 开始 ， 顺 时 针 ) 为 序 。URL 可 以 是 绝对 (比如 

http://example.com/ myBorderlmage.png) 或 者 相对 路 径 ， 后 者 是 相对 于 样式 表 所 在 的 位 

置 的 ， 而 不 是 引用 样式 表 的 HTML 页 面 的 位 置 。 

(3) 开始 在 HTML 文件 中 插入 引入 JavaScript 的 代码 ， 将 对 aaa.js 和 bbb.js 的 引用 写 到 
HTML 文件 中 。 


«script type-"text/javascript" src="aaa.js"></script> 
«script type-"text/javascript" src="bbb.js"></script> 


在 文件 bbb.js 中 ， 编 写 一 段 JavaScript 代码 ， 这 段 代码 的 主要 作用 是 让 用 户 显 示 或 者 隐藏 
nav 菜单 。 代 但 如 下 。 


1f (window.innerWidth && window.innerWidth <= 480) í 
$(document).ready(function() í 
$('#header ul).addClass('hide'); 
$('#header').append('<div class-"leftButton" onclick="toggleMenu()">Menu</div>"); 
5 
function toggleMenu() í 
$('#header ul).toggleClass('hide); 
$('#header .leftButton').toggleClass('pressed"); 


j 


对 上 述 代码 的 具体 说 明 如 下 。 

第 1 行 : 括号 中 的 代码 ， 表 示 当 Window 对 象 的 innerWidth 属性 存在 ， 并 且 innerWidth 
小 于 或 等 于 480 像素 (这 是 大 部 分 手机 合理 的 最 大 宽度 值 ) 时 才 执 行 到 内 部 。 这 一 行 保证 只 
有 当 用 户 用 Android 手机 或 者 类 似 大 小 的 设备 访问 这 个 页 面 时 ， 上 述 代码 才 会 执行 

第 2 行 : 使 用 了 函数 document ready0， 此 函数 是 “网 页 加 载 完成 ”函数 。 这 段 代 码 的 功 
能 是 设置 当 网 页 加 载 完 成 之 后 才 运 行 里 面 的 代码 。 

第 3 行 :使 用 了 典型 的 jQuery 代码 ,目的 是 选择 header 中 的 <ul> 元 素 并 且 往 其 中 添加 hide 
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此 处 的 hide 前 面 CSS 文件 中 的 选择 器 ， 这 行 代码 执行 的 效果 是 隐藏 header 的 <ul> 元 素 。 
第 4 行 : 此 处 是 给 header 添加 按钮 的 地 方 ， 目 的 是 可 以 显示 和 隐藏 柠 单 。 
第 7 行 : 函数 toggleMenu0 用 jQuery 的 toggleClassO 〇 函数 来 添加 或 删除 所 选择 对 象 中 的 更 
个 类 。 这 里 应 用 了 header 的 <ul> 里 的 hide 类 。 

第 8 行 : 在 header 的 leftButton 里 添加 或 删除 pressed 类 ， 类 pressed 的 代码 如 下 。 


#header div.pressed { 
-webkit-border-image: url(images/button clicked.png) 0 8 0 8; 


j 
通过 上 述 样式 和 JavaScript 行为 设置 以 后 ，Menu 默认 是 隐藏 了 链接 内 容 ， 单 击 之 后 才 会 
在 下 方 显示 链接 信息 ， 如 图 11-17 所 示 。 
关于 我 们 


博客 
联系 我 们 


Android 之 家 
在 线 客服 
fx 


Menu 


图 11-17 下 方 显 示 信 息 


11.5 ”使 用 Max 


Ajax (Asynchronous JavaScript And XML) 是 指 异步 JavaScript 及 XML，Ajax 不 是 一 种 
新 的 编程 语言 ， 而 是 一 种 用 于 创建 更 好 更 快 以 及 交互 性 更 强 的 Web 应 用 程序 的 技术 。 通 过 
dH] Ajax， 用 户 的 JavaScript 可 使 用 JavaScript 的 XMLHttpRequest 对 象 来 直接 与 服务 器 进行 
通信 。 通 过 这 个 对 象 ， 用 户 的 JavaScript 可 在 不 重 载 页 面 的 情况 下 与 Web 服务 器 交换 数据 。 
Ajax 在 浏览 器 与 Web 服务 器 之 间 使 用 异步 数据 传输 (HTTP 请 求 ) ， 这 样 就 可 使 网 页 从 
服务 器 请 求 少量 的 信息 ， 而 不 是 整个 页 面 。 

既然 Ajax 和 JavaScript 关系 这 么 密切 ， 就 很 有 必要 在 开发 的 Android 网 页 中 使 用 Ajax, 
这 样 可 以 给 用 户 带 来 更 精彩 的 体验 。 
下 面 通过 一 个 实例 讲解 给 手机 网 页 加 Ajax 的 方法 。 


à 


实例 11-2 说 — HJ 
源码 路 径 daima\l 1\gaoji\ 
功能 给 手机 网 页 加 Ajax 
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11.5.1 


编写 


HTML 文件 


(1) 编写 


(QD WSR 
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<html> 


个 简单 的 HIML 文件 ， 命 名 为 android.html， 有 具体 代码 如 下 。 


<head> 


<title>Jonathan Stark</title> 
«meta name="viewport" content-"user-scalable-no, width-device-width" /> 
<link rel="stylesheet" href-"android.css" type="text/css" media="screen" /> 


'Jquery.js"></script> 


«script type-"text/javascript" src 


«script type-"text/javascript" src="android.js"></script> 


</head> 
<body> 


«div id="header"><hl1>AAA</hl></div> 


<div id="container"></div> 


</body> 
</html> 


body í 


f 式 文件 android.css， 主 要 代码 如 下 。 


background-color: #ddd; 


CO 


lor: #122; 


font-family: Helvetica; 


font-size: 14px; 


margin: 0; 
padding: 0; 
) 
#header í 
background-color: #ccc; 
background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)) 
border-color: #666; 
border-style: solid; 
border-width: 0 0 1px 0; 
} 
#header hl í 
color: #122; 


font-size: 20px; 
font-weight: bold; 


margin: 0 auto; 


pa 


dding: 10px 0; 


text-align: center; 


text-shadow: Opx 1px 1px #fff; 


max-width: 160px; 
overflow: hidden; 
white-space: nowrap; 


text-overflow: ellipsis; 


, 
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ul í 
list-style: none; 
margin: 10px; 
padding: 0; 
J 
ullia í 
background-color: #FFF; 
border: 1px solid #999; 
color: #122; 
display: block; 
font-size: 17px; 
font-weight: bold; 
margin-bottom: -1px; 
padding: 12px 10px; 
text-decoration: none; 
} 
ul li:first-child a í 
-webkit-border-top-left-radius: 8px; 
-webkit-border-top-right-radius: 8px; 
} 
ul li:last-child a í 
-webkit-border-bottom-left-radius: 8px; 
-webkit-border-bottom-right-radius: 8px; 
j 
ul li a:active, ul li a:hover í 
background-color: blue; 
color: white; 


j 
#content í 

padding: 10px; 

text-shadow: Opx 1px 1px #fff; 
j 


Zcontent a í 
color: blue; 


j 


(3) 继续 编写 如 下 HTML 文件 
about.html 

blog.html 

contact.html 


index.html 


了 简单 起 见 ， 代 码 都 是 一 样 的 ， 具 体 代 码 如 下 。 


<html> 


m) 
m) 
m) 
L] consulting-clinic.html 
m) 
为 


mm 267 


HTML 5 天 发 从 入 门 到 精通 


<head> 
<title>AAA</title> 
«meta name="viewport" content-"user-scalable-no, width=device-width" /> 
<link rel="stylesheet" type="text/css" href}="android.css" media-"only screen and (max-width: 


480px)" /> 
<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 
481px)" /> 
<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="explorer.css" media="all" /> 
<![endif]--> 


<script type="text/javascript" sre="jquery.js"></script> 
<script type-"text/Javascript" src="android.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=gb1212"> 
</head> 
<body> 
<div id="container"> 
<div id="header"> 
<h1><a href="./">AAAA</a></h1> 
«div id="utility"> 
<ul> 
<li><a href="about.html">AAA</a></li> 
<li><a href="blog.html">BBB</a></li> 
<li><a href="contact.html">CCC</a></li> 
</ul> 
</div> 
<div id="nav"> 
<ul> 
<li><a href="bbb.html">DDD</a></li> 
<li><a href="ccc.html">EEE</a></li> 
<li><a href="ddd.html">FFF</a></li> 
<li><a href="http://www.aaa.com">GGG</a></li> 
</ul> 
</div> 
</div> 
<div id="content"> 
<h2>About</h2> 
<p> 欢 迎 大 家 学 习 Android， 都 说 这 是 一 个 前 途 辉 煌 的 职业 ， 我 也 是 这 么 是 认为 


的 ， 和 希望 事实 如 此 …</p> 
</div> 
«div id="sidebar"> 
«img alt=" 好 图 片 " src="aaa.png"> 
<p> 欢 迎 大 家 学 习 Android， 都 说 这 是 一 个 前 途 辉 烛 的 职业 ， 我 也 是 这 么 是 认为 


， 和 希望 事实 如 此 .…</p> 
</div> 
«div id="footer"> 
<ul> 
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<li><a href="bbb.html">Services</a></li> 
<li><a href="ccc.html">About</a></li> 
<li><a href="ddd.html">Blog</a></li> 


</ul> 
«p class="subtle"> 学 习 HTML 5</p> 
</div> 
</div> 
</body> 


</html> 


11.5.2 ”编写 JavaScript 文件 


在 JavaScript 文件 android.js 中 使 用 了 Ajax 技术 ， 有 具体 代码 如 下 。 


var hist = []; 
var startUrl = 'index.html'; 
$(document).ready(function() í 
loadPage(startUrl); 
J) 
function loadPage(url) í 
S('body").append('«div id-"progress"-wait for a moment...</div>"); 
scrollTo(0,0); 
if (url == startUrl) í 
var element = ' #header ul'; 
} else í 
var element = ' Zcontent'; 
} 
$('#container').load(url + element, function() f 
var title = $(h2").html0 || KIE"; 
$(h1").html(title); 
$('h2").remove0; 
$('.leftButton').remove(); 
hist.unshift( ('url':url, 'title'title) ); 
if (hist.length > 1) í 
S$(* header).append( «div class="leftButton">'+hist[1].title+'</div>'); 
S(* header .leftButton").click(function(e) 
$(e.target).addClass('clicked"); 
var thisPage — hist.shift(); 
var previousPage = hist.shift(); 
loadPage(previousPage.url); 
J) 
j 
$('#container a").click(function(e) ( 
var url = e.target.href; 
1f (url.match(/aaa.com/)) í 
e.preventDefault(); 
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loadPage(url); 
j 
)); 
$('#progress').remove(); 
J) 
} 


对 于 上 述 代码 的 具体 说 明 如 下 。 


I, 


的 是 使 浏览 器 在 加 载 页 面 完成 


E: 


CQ 6 1—5 行 : 使 用 了 jQuery 的 document.readyO rf 
后 运行 loadPage() 函 数 。 


F 


在 载 入 时 使 用 了 Ajax 技术 特效 
5711: 为 了 使 Ajax 效果 能 


口 


F. 


Qu w 


体 说 明 如 下 。 


— MT 


> 
$ 


8 行 换 掉 这 个 <div>。 

9 一 13 行 : 如 果 没 有 在 调 
数 中 调 
意思 是 “从 index.html 中 找 出 所 有 #header : 
#container 元 素 中 ， 完 成 之 后 再 调 
行 第 12 行 。 从 效果 上 看 ，“ 从 传 给 loadPage( bé 
们 插入 当前 页 面 的 #container 元 素 ， 完 成 之 后 调 上 


Ny 
n" 


> 
$ 


Nu 


11.5.3 ”最 后 的 修饰 


| 


N 
« 


|a ud 


I 余 的 行 数 是 函数 loadPage(url) 部 分 ， 此 函数 的 功能 是 载 入 地 址 为 URL 的 网 页 , 但 是 


显示 出 来 ， 在 这 个 loadPage0 函 数 启动 时 ， 在 body ' 
曾 加 了 一 个 正在 加 载 的 <div>， 然 后 在 hij ackLinks0 函 数 结束 的 时 候 删 除 。 


H) , url 将 会 是 undefined， 这 一 行 会 被 执行 。 


用 函数 的 时 候 指定 url (比如 第 一 次 在 document.ready() FÉ 


如 果 把 这 几 行 翻译 出 来 ， 它 的 


的 <ul> 元 素 ， 并 把 它们 插入 当前 页 面 的 
H hij ackLinks)EA ZI" o 24 url 参数 有 值 的 时 候 ， 执 
数 的 url 中 得 到 #content 元 素 ， 并 把 它 
] hij ackLinksO 函 数 。 


为 了 能 使 设计 的 页 面体 现 出 Ajax 效果 ， 还 需 继续 设置 样式 文件 android.css。 为 了 能 够 
添加 如 下 相应 的 修饰 代码 。 


bb“ 加 载 中 ...” 的 样式 ， 需 要 在 android.css ! 


#progress { 
-webkit-border-radius: 10px; 
background-color: rgba(0,0,0,.7); 
color: white; 
font-size: 18px; 
font-weight: bold; 
height: 80px; 
left: 60px; 
line-height: 80px; 
margin: 0 auto; 
position: absolute; 
text-align: center; 
top: 120px; 
width: 200px; 

j 


用 边框 图 
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片 修饰 “返回 ”按钮 ， 并 清除 默认 的 单 击 后 高 亮 


Era 


显示 的 效果 。 在 文件 android.css 


第 11 章 dx Android 手机 中 使 用 HTML 5 
中 添加 如 下 修饰 代码 。 


#header div.leftButton í 
font-weight: bold; 
text-align: center; 
line-height: 28px; 
color: white; 
text-shadow: 0px -1px 1px rgba(0,0,0,0.6); 
position: absolute; 
top: 7px; 
left: 6px; 
max-width: 50px; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
border-width: 0 8px 0 14px; 
-webkit-border-image: url(images/back button.png) 0 8 0 14; 
-webkit-tap-highlight-color: rgba(0,0,0,0); 
} 


在 Android 中 执行 上 述 文件 ， 执 行 后 先 加 载 页 面 ， 在 加 载 时 会 显示 “wait for a moment...” 


的 提示 , 如 图 11-18 所 示 。 在 滑动 选择 某 个 链接 的 时 候 , 被 选中 的 会 有 不 同 的 颜色 , 如 图 11-19 
HIZR o 


而 文件 android.html 的 执行 效果 和 其 他 文件 相 比 稍 有 不 同 , 如 图 11-20 所 示 。 这 是 编码 时 
有 意 而 为 之 的 。 
AAAA ANA hello! 
AAA BBB ia 
BBB Cce BBB 
eo wait for a moment... i — ~ ccc 
DDD 
DDD o Io DDD 
EEE EEE EEE 
FFF FFF FFF 
| GGG ] GGG GGG 
K - - 
图 11-18 提示 特效 图 11-19 被 选择 的 不 同 颜色 图 11-20 文件 android.html 


11.6 ”让 网 页 动 起 来 


在 前 面 实现 的 网 页 ， 表 面 看 来 已 经 够 绚丽 了 ， 既 有 特效 也 有 Ajax 体验 。 本 节 将 为 其 加 上 
动画 的 效果 ， 可 让 网 页 在 Android 手机 上 动 起 来 。 


EB 271 


|: HTML 5 开发 从 入 门 到 精通 


11.6.1 一 个 开源 框架 一 一 jQTouch 


jQTouch 是 能 够 提供 一 系列 功能 为 手机 浏览 器 WebKit 服务 的 jQuery 插件 。 目 前 ， 随 着 
Android 手机 、iPhone、iTouch、iPad 等 产品 的 流行 ， 越 来 越 多 的 开发 者 想 开 发 相关 的 应 用 程 


序 。 但 目前 苹果 只 提供 了 Objective-C 语言 去 编写 iPhone 应 用 程序 。 可 惜 的 是 ，Objective-C 
语言 不 容易 学 习 ， 跟 开发 Web 网 站 相 比 更 加 复杂 。 但 是 ， 这 一 切 将 发 生变 化 ， 因 为 jQuery 


的 工具 jQTouch 出 现 了 。 


使 用 jQTouch 使 构建 基于 Android 和 iPhone 的 应 用 变 得 更 加 容易 ， 只 需要 一 点 HTML. 


CSS 和 JavaScript 知识 ， 就 能 够 创建 可 在 WebKit 浏览 器 上 GPhone, Android, Palm Pre) 运 


行 的 手机 应 用 程序 。 


读者 可 以 去 其 官方 地 址 http://www.jqtouch.com/ 下 载 资源 ， 因 为 是 开源 的 ， 所 以 下 载 后 可 


以 直接 使 用 。 


11.6.2 一 个 简单 应 用 
下 面 用 一 个 实例 来 讲解 使 用 jQTouch 框架 开发 适应 于 Android 的 动画 网 页 。 


u 


实例 11-3 说 HJ 
源码 路 径 daima\l 1\donghua\ 
功能 给 手机 网 页 添加 动画 


HTML 5 文件 index.html 的 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 
<title>AAA</title> 
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css"> 
<link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css"> 
<script type="text/javascript" srec="jqtouch/jquery.js"></script> 
<script type-"text/Javascript" sre="jqtouch/jqtouch.js"></script> 
<script type="text/javascript"> 
var jQT = $.jQTouch(í 
icon: 'kilo.png' 
)); 
</script> 
</head> 
<body> 
<div id="home"> 
<div class="toolbar"> 
<hl>Data</h1> 
<a class="button flip" href="#settings">Settings</a> 
</div> 
<ul class="edgetoedge"> 
<li class="arrow"><a href="#dates">Dates</a></li> 
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<li class="arrow"><a href="#about">About</a></li> 
</ul> 
</div> 
<div id="about"> 
<div class="toolbar"> 
<hl>About</h1> 
«a class="button back" href="#">Back</a> 
</div> 
<div> 
<p>Choose you food.</p> 
</div> 
</div> 
«div id="dates"> 


«div class="toolbar"> 


<h1>Time</h1> 
<a class="button back" href="#">Back</a> 
</div> 


<ul class="edgetoedge"> 
<li class="arrow"><a id="0" href="#date">A AA</a></li> 
<li class="arrow"><a id=" 1" href="#date">BBB</a></li> 
<li class="arrow"><a id="2" href="#date">CCC</a></li> 
<li class="arrow"><a id="3" href="#date">DDD</a></li> 
<li class="arrow"><a id="4" href}="#date">EEE</a></li> 
<li class="arrow"><a id="5" href="#date">FFF</a></li> 
</ul> 
</div> 
<div id="date"> 
<div class="toolbar"> 
<hl>Time</h1> 
«a class="button back" href="#">Back</a> 
«a class="button slideup" href="#createEntry">+</a> 
</div> 
«ul class="edgetoedge"> 
<li id="entryTemplate" class="entry" style="display:none"> 
<span class="label">Label</span> <span class="calories">000</span> <span 


class="delete">Delete</span> 
</li> 
</ul> 
</div> 
<div id="createEntry"> 
<div class="toolbar"> 
<hl>WHY</h1> 
<a class="button cancel" href="#">Cancel</a> 
</div> 
<form method="post"> 
<ul class="rounded"> 
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<li><input type="text" placeholder="Food" name="food" id="food" 
autocapitalize="off" autocorrect-"off' autocomplete="off" /></li> 
<li><input type-"text" placeholder-"Calories" name="calories" id="calories" 
autocapitalize="off" autocorrect-"off' autocomplete="off" /></li> 
<li><input type="submit" class-"submit" name="waction" value="Save Entry" /></li> 
</ul> 
</form> 
</div> 
<div id="settings"> 
<div class="toolbar"> 
<h1>Control</h1> 
<a class="button cancel" href="#">Cancel</a> 
</div> 
<form method="post"> 
<ul class="rounded"> 
<li><input placeholder=" Age" type="text" name="age" id="age" /></li> 
<li><input placeholder="Weight" type="text" name="weight" id="weight" /></li> 
<li><input placeholder=" Budget" type="text" name="budget" id="budget" /></li> 


<li><input type="submit" class="submit" name="waction" value-"Save 
Changes" /></li> 
</ul> 
</form> 
</div> 
</body> 
</html> 


接 下 来 开始 对 上 述 代码 进行 讲解 。 
CL) 通过 如 下 代码 调用 jOTouch 框架 和 jQuery 框架 。 


«script type="text/javascript" src="jqtouch/jquery.Js"></script> 


«script type-"text/Javascript" src="jqtouch/jqtouch.js"></script> 


(2) 实现 home 面板 ， 有 具体 代码 如 下 。 


«div id="home"> 
<div class="toolbar"> 
<hl>Data</h1> 
<a class="button flip" href="#settings">Settings</a> 
</div> 
<ul class="edgetoedge"> 
<li class="arrow"><a href="#dates">Dates</a></li> 
<li class="arrow"><a href="#about">About</a></li> 
</ul> 


</div> 


对 应 的 效果 如 图 11-21 所 示 。 
(3) 实现 about 面板 ， 具 体 代码 如 下 。 
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«div id="about"> 
<div class="toolbar"> 
<hl>About</h1> 
<a class="button back" href="#">Back</a> 
</div> 
<div> 
<p>Choose you food.</p> 
</div> 
</div> 


对 应 的 效果 如 图 11-22 所 示 。 


Settings 


Back About 


hoose youfood 


图 11-21 home 面板 图 11-22 about 面板 
(4) 实现 dates 面板 ， 有 具体 代码 如 下 。 


«div id="dates"> 
<div class="toolbar"> 
<hl>Time</h1> 
«a class="button back" href="#">Back</a> 
</div> 
«ul class="edgetoedge"> 
<li class="arrow"><a id="0" href-"zidate" AA A«/a»«/li» 
<li class="arrow"><a id="1" href="#date">BBB</a></li> 
<li class="arrow"><a id="2" href="#date">CCC</a></li> 
<li class="arrow"><a id="3" href="#date">DDD</a></li> 
<li class="arrow"><a id="4" href="#date">EEE</a></li> 
<li class="arrow"><a id="5" href="#date">FFF</a></li> 
</ul> 
</div> 


对 应 的 效果 如 图 11-23 所 示 。 


图 11-23 dates 面板 
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(5) 实现 date 面板 ， 具 体 代码 如 下 。 


«div id="date"> 


<div class="toolbar"> 
<hl>Time</h1> 
«a class="button back" href="#">Back</a> 


<a class="button slideup" href="#createEntry">+</a> 
</div> 


«ul class="edgetoedge"> 
<li id="entry Template" class-"entry" style="display:none"> 
<span class="label">Label</span> <span class="calories">000</span> <span class= 
"delete">Delete</span> 


</li> 
</ul> 
</div> 


(6) 实现 settings 面板 ， 具 体 代 码 如 下 。 


<div id="settings"> 
«div class="toolbar"> 


<h1>Control</h1> 


<a class="button cancel" href="#">Cancel</a> 
</div> 


<form method="post"> 
<ul class="rounded"> 


<li><input placeholder=" Age" type="text" name="age" id="age" /></li> 
<li><input placeholder=" Weight" type="text" name="weight" id="weight" /></li> 


<li><input placeholder=" Budget" type="text" name="budget" id="budget" /></li> 
<li><input type="submit" class="submit" name="waction" value="Save Changes" /></li> 
</ul> 


</form> 
</div> 


对 应 的 效果 如 图 11-24 所 示 。 


Cancel Control 


Age 
Weight 


Budget 


Save Changes 


图 11-24 settings 面板 


F theme.css， 此 样式 文件 非常 简单 
修饰 。 其 实 图 11-21—11-24 都 是 


AE 


接 下 来 看 样式 文人 


， 功 能 是 对 index.html 中 的 元 素 进 行 
经 过 theme.css 修饰 之 后 的 显示 效果 。 主 要 代码 如 下 。 


body í 
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background: 加 00; 


color: #ddd; 
j 
#jqt  * 1 

background: -webkit-gradient(linear, 0% 0%, 0% 10096, from(#333), to(#5e5e65)); 
j 


#jqt h1, #jqt h2 í 
font: bold 18px "Helvetica Neue", Helvetica; 
text-shadow: rgba(255,255,255,.2) 0 1px 1px; 
color: #000; 
margin: 10px 20px 5px; 


j 


/* @group Toolbar */ 
#jqt .toolbar í 
-webkit-box-sizing: border-box; 
border-bottom: 1px solid #000; 
padding: 10px; 
height: 45px; 
background: url(img/toolbar.png) #000000 repeat-x; 


position: relative; 


#jqt .black-translucent .toolbar í 
margin-top: 20px; 


#jqt . toolbar > h1 í 
position: absolute; 
overflow: hidden; 
left: 50%; 
top: 10px; 
line-height: 1em; 
margin: 1px 0 0 -75px; 
height: 40px; 
font-size: 20px; 
width: 150px; 
font-weight: bold; 
text-shadow: rgba(0,0,0,1) 0 -1px 1px; 
text-align: center; 
text-overflow: ellipsis; 
white-space: nowrap; 
color: #fff: 

j 

#jqt.landscape .toolbar > h1 í 
margin-left: -125px; 
width: 250px; 

j 

#jqt .button, #jqt .back, #jqt .cancel, #jqt .add í 
position: absolute; 
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overflow: hidden; 

top: 8px; 

right: 10px; 

margin: 0; 

border-width: 0 5px; 

padding: 0 3px; 

width: auto; 

height: 30px; 

line-height: 30px; 

font-family: inherit; 

font-size: 12px; 

font-weight: bold; 

color: #fff; 

text-shadow: rgba(0, 0, 0, 0.5) Opx -1px 0; 
text-overflow: ellipsis; 

text-decoration: none; 

white-space: nowrap; 

background: none; 

-Wwebkit-border-image: url(img/button.png) 0 5 0 5; 


#jqt .button.active, #jqt .cancel.active, #jqt .add.active í 
-webkit-border-image: url(img/button clicked.png) 0 5 0 5; 


color: #aaa; 


#jqt .blueButton í 
-webkit-border-image: url(ime/blueButton.png) 0 5 0 5; 
border-width: 0 5px; 


#jqt .back í 
left: 6px; 
right: auto; 
padding: 0; 
max-width: 55px; 
border-width: 0 8px 0 14px; 
-webkit-border-image: url(img/back button.png) 0 8 0 14; 


#jqt .back.active í 
-webkit-border-image: url(img/back button clicked.png) 0 8 0 14; 


#jqt .leftButton, #jqt .cancel í 
left: 6px; 
right: auto; 


#jqt .add í 
font-size: 24px; 
line-height: 24px; 
font-weight: bold; 
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} 

#jqt .whiteButton, 

#jqt .grayButton, #jqt .redButton, #jqt .blueButton, #jqt .greenButton í 
display: block; 
border-width: 0 12px; 
padding: 10px; 
text-align: center; 
font-size: 20px; 
font-weight: bold; 
text-decoration: inherit; 
color: inherit; 


#jqt .whiteButton.active, #jqt .grayButton.active, #jqt .redButton.active, #jqt .blueButton.active, Zjqt . 
greenButton.active, 
#jqt .whiteButton:active, #jqt .grayButton:active, #jqt .redButton:active, #jqt .blueButton:active, #jqt . 
greenButton:active í 
-webkit-border-image: url(img/activeButton.png) 0 12 0 12; 
} 
#jqt .whiteButton í 
-webkit-border-image: url(img/whiteButton.png) 0 12 0 12; 
text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0; 


#jqt .grayButton í 
-webkit-border-image: url(ime/grayButton.png) 0 12 0 12; 
color: ZFFFFFF; 


上 述 代码 只 是 theme.css 的 五 分 之 一 ， 详 细 内 容 请 读者 参考 本 书 附 带 光 盘 中 的 源码 。 
到 此 为 止 ， 页面 就 能 够 动 起 来 了 ， 每 一 个 页 面 的 切换 都 具有 了 动画 效果 ， 如 图 11-25 所 示 。 


pr pen pem pum um pm p" 
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图 11-25 ”闪烁 的 动画 效果 
截图 11-25 体现 不 出 动画 效果 ， 读 者 可 在 模拟 器 上 体验 。 
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游戏 实战 


在 计算 机 应 用 中 ， 游 戏 永远 是 主流 应 用 模块 之 一 。 在 我 们 的 印象 中 ， 好 像 只 有 高 级 程序 


语言 才能 


介绍 使 用 HTML 5 JF 


121 开发 一 个 软 避 小 游戏 


出 写 出 游戏 项 目 ， 其 实 使 用 HTML 5 也 能 编写 出 功能 强大 的 游戏 项 目 。 本 章 将 详细 
发 游戏 项 目的 基本 知识 ， 并 通过 典型 的 实例 来 演示 具体 实现 流程 


° 


实例 12-1 说 明 
源码 路 径 daima\12\1.html 
功能 使 用 HIML 5 开发 一 个 躲避 小 游戏 


本 实例 的 功能 是 ， 使 用 HIML 5 开发 
S+CSS+JavaScript 实现 。 实 例文 件 1.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 
<html lang="en"> 

<head> 

<meta charset="utf-8"> 

<style type="text/css"> 
body, html ( 
background-color: #222222; 
} 
canvas{ 
border: 6px #333333 solid; 
background-color: #111111; 
} 
.ui( 
font-family: Arial,Helvetica, sans-serif; 
font-size: 1Opx;color: #999999; 
text-align: left; 
padding: 8px; 
background-color: rgba(0,0,0,0.5); 
position: absolute; 
z-index: 2; 
} 


#message í 


一 个 典 避 小 游戏 。 整 个 实例 比较 简单 ， 用 HTML 


padding: 16px; 

} 

#status{ 

width: 884px; 

height: 15px; 
padding: 8px; 
display: none; 

j 

#status span í 

color: #bbbbbb; 
font-weight: bold; 
margin-right: 5px; 

} 

#title í 
margin-bottom: 20px; 
color: #eeeeee; 

j 

.ui ul{ 

margin: 10px 0 10px 0; 
padding: 8px 0 8px 10px; 
} 

.ui ul li f 

list-style: none; 


j 


.ui al 

outline: none; 

font-family: Arial, Helvetica, sans-serif; 
font-size: 38px; 
text-decoration: none; 

color: Zbbbbbb; 

padding: 2px; 

display: block 

} 

.ui a: hover( 

color: #ffffff; 
background-color: 4000000; 
} 


</style> 


</head> 
<body> 
<canvas id='world'></canvas> 
«div id="status" class="ui"></div> 
«div id="message" class="ui"> 
<h2 id="title">Sinuous - Instructions</h2> 
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=0] 


<ul> 
<li>1. Avoid red dots.</li> 
<li>2. Touch green dots for invulnerability.</li> 
<li>3. Use invulnerability to destroy red dots.</li> 
<li>4. Score extra points by moving around a lot.</li> 
<li>5. Stay alive.</li> 
</ul> 
<a href="#" id="startButton">Start</a> 
</div> 
<script> 


SinuousWorld=new function() {var D=navigator.userAgent.toLowerCase();var x=(D.indexOf("android")! 


(D.indexOf("iphone")!—-1)|(D.indexOf("ipad")!—-1);var d=x?window.inner Width:900;var B=x? 


window.innerHeight:550;var h;var f;var z;var u;var K;var b;var w=[];var y=[];var H=[];var A;var t= 


(window.innerWidth-d);var r=(window.innerHeight-B);var J=false;var k=false;var C=0;var m=0;var 


s={X:-1.3,y:1};var E=1;this.init=function() {h=document. getElementById("world");z=document. getElementById 


lse);L 
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("status");uzdocument.getElementById("message");K-document.getElementById 


("title");b-document.getElementByld("startButton");1f(h&&h.getContext) ( £-h.getContext("2d");var 


L-function(N,M,O) ( document.addEventListener(N,M,O)) ;L("mousemove",c,false); L("mousedown",l,fa 


("mouseup",IL,false);h.addEventListener("touchstart",i,false); L("touchmove",q,false); L. 


("touchend" v, false); window.addEventListener("resize",a,false);b.addEventListener 


("click",j,false);A=new Player();a();if(x) (h.style.border-"none";s.x*—2;s.y *—2;setInterval(G, 1000/20) 


else(setInterval(G,1000/60)] } ) ;function j(L) {if(k==false) {k=true;w=[];y=[];C=0;E=1 ;A.trail 


[J;A.p.X=t; A.p.y7r; A.boost-0;u.style.display—"none";z.style.display-"block";m-new Date().getTime()) ) 


function o() (k-false;u.style.display-"block";K.innerHTML "Game Over! ("--Math.round(C)-*" points)" } 


function c(L) (t-L.clientX-(window.innerWidth-d)*0.5-10;r-L.clientY -(window.innerHeight-B)*0.5-10) 


function I(L) (J^true) function I(L){J=false} function 1(L) (1f(L.touches.length-—1) (L.preventDefault 


O:t-L.touches[0].pageX-(window.innerWidth-d)*0.5;r-L.touches[0].pageY -(window.innerHeight-B) 
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*0.5;J=true } }function q(L){if(L.touches.length==1){L.preventDefault();t=L.touches[0].pageX- 


(window.innerWidth-d)*0.5-20;r=L.touches[0].page Y-(window.innerHeight-B)*0.5-2011function v(L) 


{J=false} function a(){d=x?window.innerWidth:900;B=x?window.innerHeight:550;h.width=d;h.height= 


B;var M-(window.innerWidth-d)*0.5;var L=(window.innerHeight-B)*0.5;h.style.position="absolute";h.style.left= 
M+"px";h.style.top=L+"px";if(x) 


1;H.push 


nceTo 


{u.style.left="0px";u.style.top="0px";z.style.left="0px";z.style.top="0px" }else 


{u.style.left=M+6+"px";u.style.top=L+200+"px";z.style.left=M+6+"px";z.style.top=L+6+"px" } } function g 


(O,M,L) (var N=10+(Math.random()*15);while(--N>=0){n=new Particle();n.p.x=O.x+(Math.sin(N) 


*M);n.p.y=O.y+(Math.cos(N)*M);n.velocity={x:-4+Math.random()*8,y:-4+Math.random()*8};n.alpha= 


(n)! !function G(){f.clearRect(0,0,h.width,h.height);var P—(x:s.x*E,y:s.y *E) ;var O,M,N,L;if(k) 


{E+=0.0008;pp=A.clonePosition();A.p.x+=(t-A.p.x)*0.13;A.p.y+=(r-A.p.y)*0.13;C+=0.4*E;C+=A.dista 


(pp)*0.1;A.boost=Math.max(A.boost-1,0);if(A.boost>0&&(A.boost>100||A.boost%3!=0)){f.beginPath 


O;f.fillStyle="#167a66";f.strokeStyle="#00ffce";f.arc(A.p.X,A.p.y,A.s*2,0,Math.PI*2,true);f.fill 


O:£stroke()) A.trail.push(new Point(A.p.x,A.p.y));f.beginPath 


O:£strokeStyle-'7:648d93";f.lineWidth-2;for(O-0,N-A.trail.length;OXN;O-—) (p-A.trail[O ];f.lineTo 


(p-p-X.p.p.y);p-.p-xX—P.x;p.p.y?—P. y) £.stroke();£.closePath();if( A.trail.length760) (A.trail.shift()] 


f.beginPath();f.fillStyle- 4 8ff1ff';f.arc(A.p.x, A.p.y.A.s/2,0, Math.PI*2,true);f.fill()  if(k&& 


(A.p.x«O|[A.p.x^d||A.p.y«0|[A.p.y^B)) (g(A.p.10);0()) for(O-20;O«w.length;O-—) (p2w[O]:1f(k) {if 


(A.boost* 0&&p.distanceTo(A.p)«((A.s*4)*p.s)*0.5) (e(p.p.10);w.splice(O,1);O—;C-—10;continue] else (if 


(p.distanceTo(A.p)«(A.s-*p.s)*0.5) (g(A.p.10);0()) 1 £.beginPath();£.fillStyle-"7*££0000";f.arc 


(p.p-x.p.p.y.p.s/2,0,Math.PT*2,true);f. fill();p.p.x-—P.x *p.£p.p.y-*—P.y*p.fiif(p.p.x«O||p.p.y^B) 


Íw.splice(O,1);O--] Hfor(O-0;O«y.length;O-—) (p-y[O J;if(p.distanceTo(A.p)«(A.s-p.s)*0.5& &k) 
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0))}for 


m)/1000) 


dom() 


—new 


284 BH 


(A.boost-300;for(M-0;Mw.length;M-—) (e2w[M [;if(e.distanceTo(p.p)«100) (g(e.p,10);w.splice(M,1);M- 


-;C+=10} )  £beginPath();f.fillStyle-"200ffcc";f.arc(p.p.x,p.p.y.p.s/2,0, Math. PT*2,true);f£ fill 


O:p.p.x*—P.x*p.£p.p.y*—P.y*p.f;if(p.p.x«O||p.p.y^ B||A.boost!—0) (y.splice(O,1);O--) if(w.length«35*E) 


Íw.push(F(new Enemy())) Hfy.length«1&&Math.random()*0.9977 && A.boost--0) (y.push(F(new Boost 


(020;O«H.length;O-—) (p-H[O ;p.velocity.x--(P.x-p.velocity.x)*0.04;p.velocity.y-—(P.y-p.velocity.y) 


*0.04;p.p.x*—p.velocity.x;p.p.y-—p.velocity.y;p.alpha-—0.02;f.fillStyle-"rgba(255,255,255,"--Math.max 


(p.alpha,0)*")";£.fillRect(p.p.x.p.p.y. 1,1);1f(p.alpha«—0) (H.splice(O,1)) Hf(k) [scoreText-" Score: 


<span>"+Math.round(C)+"</span>";scoreText+=" Time: «span-"--Math.round(((new Date().getTime()- 


*100)/100-"sc/span-";z.innerHTML-scoreText] ) function F(L) (if(Math.random()70.5) [L.p.x-Math.ran 


*d;L.p.y—-20] else (L.p.x-d--20;L.p.y-(-B*0.2)--(Math.random()*B* 1.2) ) return L} ) ;function Point(a,b) 


Íthis.p- (x:a, y:bj ) Point.prototype.distanceTo-function(c) (var b-c.x-this.p.x;var a-c.y-this.p.y;return 


Math.sqrt(b*b--a*a)) ;Point.prototype.clonePosition-function() (return (x:this.p.x,y:this.p.y } ) ;function 


Player() (this.p- (x:0,y:0) :this.trail-[];this.s-8;this.boost-0) Player.prototype-new Point();function 


Enemy() fthis.p- (x:0,y:0) :this.s-6(Math.random()*4);this.£-1--(Math.random()*0.4)) Enemy.prototype 


Point();function Boost() fthis.p- (x:0,y:0) :this.s-10--(Math.random()*8);this.£-1--(Math.random()*0.4)] 


Boost.prototype-new Point();function Particle() (this.p- (x:0,y:0) ;this.£-1--(Math.random() 


*0.4);this.color="#ff0000" | Particle.prototype-new Point();SinuousWorld.1init(); 
</script> 
</body> 


</html> 


执行 后 的 效果 如 图 12-1 所 示 。 
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图 12-1 执行 效果 


12.2 开发 一 个 迷宫 游戏 


实例 12-2 说 明 
源码 路 径 daima\12\2.html 
功能 开发 一 个 网 页 版 的 迷宫 游戏 


本 实例 的 功能 是 ， 使 用 HTML 5 开发 一 个 网 页 版 迷宫 游戏 。 整 个 实例 比较 简单 ， 使 用 键 
盘 上 的 一 、 一 、 t. d 键 进 行 控制 。 实 例文 件 2.html 的 代码 如 下 。 


<!DOCTYPE html> 

<head> 

«meta http-equiv="Content-Type" content-"text/html; charset=gb2312" /> 
<title> 走 迷宫 游戏 </title> 

</head> 

<body> 

<SCRIPT> 

function ShowMenu(bMenu) { 
document.all.idFinder.style.display = (bMenu) ? "none" : "block" 
document.all.idMenu.style.display = (bMenu) ? "block" : "none" 
IdML.className = (bMenu) ? "cOn" : "cOff" 

IdRL.className = (bMenu) ? "cOff' : "cOn" 

return false 

j 

</SCRIPT> 

<STYLE> 
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«I-- 
A.cOn (text-decoration:none;font-weight:bolder] 
Zarticle (font: 12pt Verdana, geneva, arial, sans-serif; background: white; color: black; padding: 


10pt 15pt 0 5pt} 

article P.start (text-indent: Opt] 

Zarticle P (margin-top:Opt;font-size: lOpt;text-indent:12pt] 

Zarticle author (margin-bottom:5pt;text-indent:Opt;font-style: italic) 
#pageList P (padding-top:10pt] 

Zarticle H3 (font-weight:bold] 

Zarticle DL, UL, OL (font-size: 10pt} 

=> 


</STYLE> 


<SCRIPT> 

«ll 

function addList(url,desc) í 

if ((navigator.appName--"Netscape") || (parseInt(navigator.appVersion)?—4)) í 


var w—window.open 


(""," IDHTML LIST ","top-0,left-0,width—475,height-150,history-no,menubar-no,status-no,resizabl 
e-no" 

var d-w.document 

if (!w. init) í 

d.open() 

d.write("<TITLE>Loading...</TITLE><EM>Loading...</EM>") 

d.close() 


W.opener-self 

window.status-"Personal Assistant (Adding): " + desc 
} else í 

window.status—w.addOption(url,desc) 

w.focus() 

} 

} 


else 

alert("Your browser does not support the personal assistant.") 
return false 

} 

// --> 

</SCRIPT> 


<STYLE TYPE="text/css"> 

#board TD {width: 15pt; height: 15pt; font-size: 2pt; } 

TD.foot (font-size: 10pt;} 

#board TD.start (font-size: 8pt; border-left: 2px black solid; background:yellow; border-top: 2px black 
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solid;text-align: center; color: red} 

#board TD.end (font-size: 8pt; text-align: center; color: green) 
?tmessage (margin: Opt; padding: Opt; text-align: center) 
</STYLE> 

<SCRIPT LANGUAGE="JavaScript"> 

var maze = new Array() 

var sides = new Array("Border-Top", "Border-Right") 

for (var rows=0; rows<13; rows++) 

. = new Array() 


1] = new Array(0,0,1,0,1,0,0,0,0,1,0,1) 
0] = new Array(1,0,0,0, 1,0, 1,1,1,0, 1,1) 
1] = new Array(0,1,1,0,0,1,1,0,0,1,0,1) 
0] = new Array(1,0,1,0,1,0,0,1,1,0,1,1) 
1] = new Array(0,0,0,0,1,1,1,0,0,0,0,1) 
0] = new Array(0,1,1,1,1,1,0,0,0,0, 1,1) 
1] = new Array(1,0,0,1,0,0,0,1,1,0,0,1) 
0] = new Array(0,0,0,0,0,0,1,1,1,1, 1,1) 
1] 2 new Array(1,1,1,1,1,0,0,0,0,0,1,1) 
0] = new Array(0,0,0,0,1,0,1,1,1,1,0,0) 
1] 2 new Array(1,1,1,1,1,1,0,0,0,1,0,1) 
0] = new Array(0,0,0,0,0,0,1,1,0,1,0,1) 
[1] = new Array(1,1,1,1,1,1,0,0,0,1,0,1) 
[0] = new Array(1,0,1,0,0,0,1,0,1,1,0,1) 
[1] 2 new Array(1,1,1,0,1,0,0,1,0,1,1,1) 
[0] = new Array(0,0,0,1,0,0,1,1,0,0,0,0) 
[1] = new Array(0,1,0,1,1,0,0,0,1,1,0,1) 
[0] = new Array(0,0,0,0,0,1,1,1,1,0,1,1) 
maze[9][1] = new Array(1,1,1,1,0,0,0,0,0,1, 1,1) 
0] = new Array(0,0,0,0,0,1,1,1,1,1,0,0) 


maze|[1 


[ 
[ 
[ 
[ 
[ 
[ 
[ 
[ 
[ 
[ 
[ 
[ 


] 
] 
] 
] 
] 
] 
] 
] 
] 
] 
] 
] 
] 
7] 
] 
] 
] 
] 
] 


[ 
[ 
[ 
[ 
[ 
[ 
[ 
[ 
[ 
[ 
[ 
[ 
[ 
maze[6 
[ 
[ 
[ 
[ 
[ 
[ 
[10 
[ 
maze|[ 
maze[ 
maze[12][0] = new Array(0,0,0,0,0,1,1,1,1,0,1,0) 

maze[12][1] = new Array(1,1,0,1,0,0,0,1,0,0, 1,1) 

function testNext(nxt) í 

if ((board.rows[start.rows ].cells[start.cols].style.backgroundColor--"yellow") && 


(nxt.style.backgroundColor——yellow")) í 
message.innerText-"I see you changed your mind." 


board.rows[start.rows ].cells[start.cols].style.backgroundColor- 


return false 


j 


return true 
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j 


function movelt() í 

if (!progress) return 

switch (event.keyCode) í 

case 37: // ZÉ 

if (maze|[start.rows][1][start.cols-1]——0) í 

if (testNext(board.rows[start.rows].cells[start.cols-1])) 
message.innerText-"Going west..." 

start.cols-- 
document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor-"yellow" 
) else 

message.innerText-"Ouch... you can't go west." 


break; 

case 38: // 上 

if (maze[start.rows][O][start.cols]-—0) í 

if (testNext(board.rows[start.rows-1 ].cells[start.cols])) 

message.innerText-"Going north..." 

Start.rows-- 

document.all.board.rows[start.rows ].cells[start.cols].style.backgroundColor-"yellow" 
) else 

message.innerText-"Ouch... you can't go north." 


break; 
case 39: // 4i 


if (maze[start.rows][1][start.cols]-—0) í 

if (testNext(board.rows[start.rows].cells[start.cols--1 ])) 

message.innerText-"Going east..." 

start.cols++ 
document.all.board.rows[start.rows].cells[start.cols|.style.backeroundColor="yellow' 


j 


else 


message.innerText-"Ouch... you can't go east." 


break; 

case 40: // F 

if (maze|[start.rows--1 |-—null) return 

if (maze|[start.rows--1 ][O0][start.cols]——0) í 

if (testNext(board.rows[start.rows--1 ].cells[start.cols])) 

message.innerText-"Going south..." 

start.rows++ 
document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow" 
} else 

message.innerText="Ouch... you can't go south." 
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break; 

} 

if (document.all.board.rows[start.rows].cells[start.cols|.innerText=="end") í 
message.innerText-"Y ou Win!" 

progress-false 

j 


j 
</SCRIPT> 


«P ALIGN=center> 请 使 用 键盘 上 的 一 一 1 V 键 进行 游戏 </P><BR> 

<p><TABLE ID=board ALIGN=CENTER CELLSPACING=0 CELLPADDING=0> 
«SCRIPT LANGUAGE="JavaScript"> 

for (var row = 0; row<maze.length; row++) í 

document.write("<TR>") 


for (var col = 0; col<maze[row][0].length; col++) í 
document.write("<TD STYLE=") 

for (var cell = 0; cell<2; cell++) í 

if (maze[row][cell][col|==1) 
document.write(sides[cell]+": 2px black solid;") 

j 

if ((0——col) && (0!=row)) 

document. write("border-left: 2px black solid;") 

if (row—-maze.length-1) 

document. write("border-bottom: 2px black solid;") 
if ((0—row) && (0——col)) 

document.write(" background-color:yellow;' class-start»start«/TD-") 
else 

if ((row-—-maze.length-1) && (col-—maze|[row ][0].length-1)) 
document.write("' class=end>end</TD>") 

else 

document. write("'> </TD>") 

j 

document. write("</TR>") 

j 

var start = new Object 

start.rows = 0 

start.cols = 0 

progress=true 

document.onkeydown = movelt; 

</SCRIPT> 

</TABLE> 

«P ID="message"> </P> 

</body> 

</html> 
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执行 后 的 效果 如 图 12-2 所 示 。 


请 使 用 键盘 上 的 一 全 f | 键 进行 游戏 


图 12-2 执行 效果 


开发 一 个 网 页 版 的 贪 必 蛇 游 戏 


在 本 实例 中 ， 按 “空格 键 ”可 以 开始 或 暂停 游戏 ， 一 共有 三 种 游戏 速度 可 供 玩家 选择 。 


实例 12-3 说 HJ 
源码 路 径 daima\12\3.html 
功能 开发 一 个 网 页 版 的 贪 吃 蛇 游 戏 


实例 文人 
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F 3.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 
<head> 
«meta http-equiv="Content-Type" content-"text/html; charset=utf-8" /> 
<title>Snake</title> 
<style> 

* 


{ margin:0; padding:0; font-family:Verdana, 宋 体 ; font-size: 12px;) 
table#map í width:auto; height:auto; margin:0 auto; border-collapse:collapse; border-spacing:0; 


background-color:#EAEAEA; clear:both; } 


td { width: 10px; height:10px; border:1px solid black; } 

.shead { background-color: orangered;} 

.Sbody { background-color: black;} 

.Sfood { background-color: orangered; | 

.info { width:400px; margin:0 auto; padding:3em 0;} 

info li{ float:left; height:30px; margin-right:2em; line-height:30px;} 
</style> 


<script type="text/javascript" language="javascript"> 
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function Snake()( 
this.rows = 20; 
this.cols = 40; 


this.speed = 200; 

this.currKey = 0;// 当 前 方向 

this.timer = 0; 

this.sid = "snakeObj"-parseInt(Math.random()* 100000); 
eval(this.sid--"—this"); 

this.pos = [];// 蛇 身 
this.foodPos = {"x":-1,"y":-1}; 

this.foodNum = 0; 

this.domTab = document.getElementById("map");// 地 图 
this.pause = 1;//1,-1 


} 
Snake.prototype.init = function() í 
this.map(); 
arguments[0] ? this.speed-arguments[0] : false;// 选 择 速 度 
this.pos = [{"x":2,"y":5}, ("x": 1,"y': 53, ("x":0," y" 53; 
for( j in this.pos ){/ 画 全 身 ,move H mi KFE 
this.domTab.rows[this.pos[j].y].cells[this.pos[j].x].className="sbody"; 
} 
this.domTab.rows[this.pos[0].y].cells[this.pos[0].x|.className="shead"; 
this.currKey = 0; 
this.foodNum = 0; 
this.food(); 
this.pause = 1; 
J 


Snake.prototype.trigger = function(e)í 
var e = e|levent; 
var eKey = e.keyCodelle.whichlle.charCode; 
这 eKey>=37 && eKey<=40 && eKey!=this.currKey && !( (this.currKey — 37 && eKey = 39) 
|(this.currKey — 38 && eKey = 40) || (this.currKey == 39 && eKey = 37) || (this.currKey == 40 && eKey == 38) ) 
&& this.pause—-1 ){// 响 应 :上 下 左右 & 不 是 当前 方向 & 不 是 反方 向 & 不 在 暂停 状态 


this.currKey = eKey; 
lelse if( eKey==32 ){// 空 格 :暂停 ,开始 
this.currKey = (this.currKey==0) ? 39 : this.currKey; 


((this.pause*— -1) = -1) ? this.timer-window.setInterval(this.sid--" .move()"sthis. speed) : 
window.clearInterval(this.timer); 


j 

h 

Snake.prototype.move = function() //ii] 3. JEFE ES. Wap A 
switch(this.currK ey)( 


case 37: 
if( this.pos[0].x <= 0 ){ this.die(); return; 1 //Jg Hi 


EN 291 


HTML 5 天 发 从 入 门 到 精通 


else ( this.pos.unshift( {"x":this.pos[0].x-1,"y":this.pos[0].y}); JIRE 
break;// 左 
case 38: 
if( this.pos[0].y <= 0 ){ this.die(); return; } 
else{ this.pos.unshift( ("x":this.pos[0 ].x," y" :this.pos[0].y-11); } 
break;// 上 
case 39: 
if( this.pos[0].x >= this.cols-1 ){ this.die(); return; } 
else í this.pos.unshift( ("x":this.pos[0].x-- 1," y":this.pos[0].y 3); ) 
break;// i 
case 40: 
这 this.pos[0].y >= this.rows-1 ){ this.die(); return; ) 
else í this.pos.unshift( ("x":this.pos[0].x,"y":this.pos[0].y--13); ) 
break;// F 
h 
if( this.pos[0].x == this.foodPos.x && this.pos[0].y == this.foodPos.y ){// 吃 到 食物 
this.foodPos.x = -1;// 食 物 被 吃 ,不 删 蛇 尾 
this.food(); 
lelse if( this.currKey !— 0 ) (//Illliirz Fë init 时 不 删 
this.domTab.rows|[this.pos[this.pos.length-1 ].y .cells[this.pos[this.pos.length-1 ].x].class 
Name=""; 


this.pos.pop(); 


for( i=3;i<this.pos.length;it+ ){// 从 蛇 的 第 四 节 开 始 判 断 是 否 撞 到 自己 了 因为 蛇 头 为 两 节 
第 三 节 不 可 能 抛 过 来 


if( this.pos.x == this.pos[0].x && this.pos.y == this.pos[0].y )í 
this.die(); 


return; 


this.domTab.rows[this.pos[0].y].cells[this.pos[0].x].className="shead";// 画 新 头 
this.domTab.rows[this.pos[1].y].cells[this.pos[1].x].className="sbody";/ 旧 头 变 身 体 


5 
Snake.prototype.die = function() í 
alert("x x"); 
window.clearInterval(this.timer); 
this.init(); 
} 
Snake.prototype.food = function(){// 生 成 食物 
if( this.foodPos.x == -1 ){// 已 存在 时 位 置 不 变 
doí 


this.foodPos.y = Math.round( Math.random()*(this.rows-1) ); 
this.foodPos.x = Math.round( Math.random()*(this.cols-1) ); 
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} 
while( this.domTab.rows[this.foodPos.y].cells[this.foodPos.x].className != "" )// 防 


止 生成 在 蛇 身 上 


j 
this.domTab.rows[this.foodPos.y |.cells[this.foodPos.x].className-"sfood"; 


document.getElementById("foodNum").innerHTML-this.foodNum-—; 

5 
Snake.prototype.map = function() (//£)] & Hh K] 
this.domTab.firstChild ? this.domTab.removeChild(this.domTab.firstChild) : false;// 重 新 开始 加 


除 tbody 
for( J = 0; J < this.rows; j++ ){ 
var tr = this.domTab.insertRow(-1); 
for( i = 0; i < this.cols; i++ ){ 
tr.insertCell(-1); 
} 
} 
h 
window.onload — function() ( 
var orz = new Snake(); 
orz init(); 
document.onkeydown = function(e) í orz.trigger(e); };//firefox 需要 参数 e 
document.getElementBylId("setSpeed").onchange = function() í this.blur(); orz.init(this.value); 
h 
h 
</script> 
</head> 
<body> 
<ul class="info"> 
<]i> 分 数 :<span id="foodNum"></span></li> 
<] 这 选择 速度 :<select id="setSpeed"><option value="200"> 慢 (200)</option><option value= "1 
00"> 中 (100) 


</option><option value="50">Et(50)</option></select></li> 
dij "EU Jp EHE 


</ul> 


<table id="map"></table> 
</body> 
</html> 


执行 后 的 效果 如 图 12-3 所 示 。 
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° 分 数 :0 o 选择 速度 :| 慢 (200) 避 | . 按 空格 键 ” 开始 /暂停 


图 12-3 ”执行 效果 


12.4 开发 一 个 网 页 版 的 俄罗斯 方块 游戏 


俄罗斯 方块 是 一 款 风靡 全 球 的 电视 游戏 机 和 掌上 游戏 机 游戏 ， 它 由 俄罗斯 人 阿 列 克 谢 。 帕 
基 特 诺 夫 发 明 ， 故 得 此 名 。 俄 罗斯 方块 的 基本 规则 是 移动 、 旋 转 和 摆 放 游戏 自动 输出 的 各 种 
方块 ， 使 之 排列 成 完整 的 一 行 或 多 行 并 且 消 除 得 分 。 由 于 上 手 简单 、 老 少 皆 宜 ， 因 而 家 喻 户 
晓 ， 风 靡 世界 。 


实例 12-4 说 — UJ 
源码 路 径 daimaM2M.html 
功能 开发 一 个 网 页 版 的 俄罗斯 方块 游戏 


本 实例 的 功能 是 ， 使 用 HTML 5+CSS+JavaScript 开发 一 个 网 页 版 俄罗斯 方块 游戏 。 游 戏 
由 人 、+ 、 一 、 一 四 个 方向 键 进行 控制 。 

O t: 方块 变型 

n i: 加 速 下 落 

口 一 : 向 右 移动 

Q 一 : 向 左 移 动 

D P: 暂停 或 开始 游戏 

实例 文件 4.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 
<head> 
<title> 俄 罗斯 方块 </title> 
<style type="text/css"> 
#map {border:3px solid green;background-image:url(tetris grid.gif);float:left;margin-right:20px;} 


#preview {float:left;} 
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l 


[ 
[1,1,0,0], 
[1,1,0,0], 
[0,0,0,0], 
[0,0,0,0] 
] 


GameMap:[],/ 游 戏 地 图 ， 对 应 table 中 的 td 值 
BlokWidth:28,// 方 块 集 的 宽 高 ， 也 就 是 http://www.codefans.net/jscss/demoimg/201109/ 


tetris grid.gif 图 片 的 TEF 


HorizontalNum:10,// 水 平 td 数量 
VerticalNum:18,//3Ë A. td 数量 


BlokSize:4,/ 设 置 方块 占用 位 置 4*4 
BlockWidth:0/ 获 取 当 前 方块 的 非 0 的 最 大 宽度 
BlockHeight:0/ 获 取 当 前 方块 的 非 0 的 最 大 高 度 
CurrentIndex:0,// 当 前 随机 获得 的 索引 
NextCurrentIndex:0,// 获 取 下 一 个 方块 的 索引 
BlokCurrent:[],// 当 前 方块 

InitPosition: 他 ,当前 方块 运动 的 xy 
IsPlay:false,// 是 人 否 开 始 游 戏 

IsOver:false,// 游 戏 是 否 结束 

IsOverIndex:0,// 设 置 游戏 结束 的 索引 还 有 空 儿 行 
Score:0, 

ScoreIndex:100, 


ColorEnum: [[0, 0], [-28, 0], [-56, 0], [-84, 0], [-112, 0], [-140, 0], [-168, 0], [0, 0]], /颜色 


的 枚 举 ， 对 应 BlogsSetting 


B 


CreateMap:function()1 


/加 载 地 图 ， 设 置 其 宽 高 ， 根 据 HorizontalNum,VerticalNum 的 数量 决定 
var map = document.getElementByld("map"); 

var w = this.BlokWidth*this.HorizontalNum; 

var h = this.BlokWidth*this.VerticalNum; 

map.style.width-w--"px"; 


map.style.height-h--"px"; 
/加 载 地 图 对 应 的 数组 ， 初 始 化 为 0， 当 被 占据 时 为 1 
for(var i=0;i<this. VerticalNum;i++){ 
this.GameMap.push([]); 
for(var j=0;j<this. HorizontalNum;j++){ 
this.GameMap|i][j]=0; 


Í 
/创建 table td 填充 div 根据 HorizontalNum,VerticalNum 的 数量 决定 ， 创 建 


HorizontalNum * VerticalNum 的 表格 区 域 
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var tbody = document.createElement("tbody"); 
table.cellPadding-0; 
table.cellSpacing-0; 
table.appendChild(tbody); 
for(var i-0;i«this. VerticalNum;i++){ 

var tr = document.createElement("tr"); 
for(var j=0;j<this.HorizontalNum;j++){ 
var td = document.createElement("td"); 
tr.appendChild(td); 
} 
tbody.appendChild(tr); 
} 
map.appendChild(table); 
this.CreatePreViewMap(); 
this.CreateNextBlock(); 
Jo 
CreatePreViewMap:function(){// 加 载 一 个 4*4 的 表格 到 预览 区 域 
var preview = document.getElementById("previewArea"); 
var table = document.createElement("table"); 
table.id-"perviewTable"; 
var tbody — document.createElement("tbody"); 
table.cellPadding-0; 
table.cellSpacing-0; 
table.appendChild(tbody); 
for(var i-0;i«this.BlokSize;17—) ( 
var tr = document.createElement("tr"); 
for(var j-0;j«this.BlokSize;j-—) ( 
var td — document.createElement("td"); 
tr.appendChild(td); 
} 
tbody.appendChild(tr); 
} 
preview.appendChild(table); 
J. 
LoadPreview:function(index){// 加 载 到 预览 区 域 
var previewTable = document.getElementById("perviewTable"); 
for(var 1=0;i<this.BlogsSetting[index|.length;i++){ 
for(var j=0;j<this.BlogsSetting[index][i].length;j++){ 
previewTable.rows[i].cells[j].style.backgroundImage=""; 
if(this.BlogsSetting[index][1][j]-71) f 
previewTable.rows[i].cells[j].style.backgroundImage-"url(tetris.gif)"; 


previewTable.rows[i].cells[j ].style.backgroundPosition-this.Color 
Enum([index][0]--"px"-""--this.ColorEnum[index] [1 |+"px"; 


j 
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J 
SettingBlock:function() TV/ 设 置地 图 中 方块 的 背景 图 片 
var tb = this.getTable(); 
for(var i=0;i<=this.BlockHeight;i++){ 
for(var j=0;j<=this.BlockWidth;j++){ 
if(this.BlokCurrent[i][j]-—1) í 
tb.rows[this.InitPosition.y-H].cells[this.InitPosition.x-; J.style.backg 


roundImage-"url(tetris. gif)"; 


tb.rows[this.InitPosition.y-Hi].cells[this.InitPosition.x- J.style.backgr 
oundPosition-this.ColorEnum[this.CurrentIndex ][0 | "px" "--this.ColorEnum[this. CurrentIndex ][1 ]-"px'"'; 


j » 
CanMove:function(x,y){// 根 据 传 过 来 的 x,y， 检 测 方块 是 否 能 左右 下 移动 
if(y+this.BlockHeight>=this.VerticalNum)// 判 断 是 否 有 到 最 底部 , 如 果 到 底部 的 话 
停止 癌 下 移动 


return false; 
for(var i=this.BlockHeight;i>=0;i--){// 检 测 方块 的 最 高 坐标 相对 应 的 地 图 的 坐标 
是 否 有 都 等 于 1， 如 果 有 等 于 1 说 明 地 图 放 不 下 该 方块 


for(var j=0;j<=this.BlockWidth;j++){ 
if(this. GameMap[i][xj ]1 &&this.BlokCurrent[i][j]==1)í 
this.IsOverIndex-i; 
this.IsOver-true; 


j 
for(var i=this.BlockHeight;i>=0;i--){// 检 测 方块 的 移动 轨迹 在 地 图 中 是 否 被 标记 
为 1， 如 果 被 标记 为 1 就 是 下 一 步 的 轨迹 不 能 运行 。 


for(var j=0;j<=this.BlockWidth;j++){ 
if(this. GameMap[y-H][x]-—1 &&this.BlokCurrent[i][j ]—1) (// 4] Br 77 IR 
的 下 一 步 轨迹 是 否 是 1， 并 且 判 断 下 一 步 方 块 的 轨迹 在 地 图 中 是 否 为 1。 


return false; 


j 
return true; 
da 
ClearOIdBlok:function() (//?* this.InitPosition.y»—0 也 就 是 在 显示 地 图 的 时 候 ， 每 次 左 
右上 下 移动 时 清除 方块 ， 使 得 重新 绘制 方块 
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if(this.InitPosition.y>=0){ 
for(var i=0;i<=this.BlockHeight;i++){ 
for(var j=0;j<=this.BlockWidth;j++){ 
if(this.BlokCurrent[i][j]==1)í 
this.getTable().rows[this.InitPosition.y+i].cells[this.InitPosition. 
x+j|.style.backeroundImage=""; 


J. 
MoveLeftfunction)( — V 向 左 移动 
var x = this.InitPosition.x-1; 
if(x«0|[this.InitPosition.y——-1) 
return; 
if(this.CanMove(x.this.InitPosition.y)) ( 
this.ClearOldBlok(); 
this.InitPosition.x—x; 
j 
this.SettingBlock(); 
J. 
MoveRight:function() {W 癌 右 移动 
var x = this.InitPosition.x+1; 
if(x+this.BlockWidth>=this.HorizontalNum ||this.InitPosition.y==-1) 
return; 
if(this.CanMove(x,this.InitPosition.y)){ 
this.ClearOldBlok(); 
this.InitPosition.x—x; 
j 
this.SettingBlock(); 
J. 
MoveDown:function(){// 和 癌 下 移动 
var y = this.InitPosition.y+1; 
if(this.CanMove(this.InitPosition.x,y)){// 判 断 是 否 能 向 下 移动 ， 不 能 的 话 表 示 该 方 
块 停止 运行 ， 继 续 判 断 是 和 否 游戏 结束 ， 如 果 游 戏 还 没 结束 ， 重 新 创建 方块 继续 游戏 


this.ClearOldBlok(); 
this.InitPosition.y—y; 
this.SettingBlock(); 

j 


else{ 
if(this.IsOver){ 
window.clearTimeout(OverTime); 
this.GameOver(); 
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return; 
} 
this.SettingBlock(); 
this.SettingGameMap(); 
this.CheckFull(); 
this. NewBlock(); 
this.CreateNextBlock(); 
return; 


J 
ChangeBlock:function0{/ 回 上 方块 变型 
if(this.InitPosition.y—-1) 
return; 
var newBlock = [[0,0,0,0].[0,0,0,0 ],[0,0,0,0 ],[0,0,0,0]]; 
for(var 1-0;i«—this.BlockHeight;i7-) ( 
for(var j=0;j<=this.BlockWidth;j++){ 
newBlock[this.BlockWidth-j][i] = this.BlokCurrent[1][j |; 


j 

var temp = this.BlokCurrent; 

this.ClearOldBlok(); 

this.BlokCurrent-newBlock; 

this.BlockWidth-this.GetWidth(this.BlokCurrent); 

this.BlockHeight-this.GetHeight(this.BlokCurrent); 

if(this.InitPosition.x-*this.BlockWidth--this.HorizontalNum||!this.CanMovec(this.Init 
Position.x,this.InitPosition.y)) (//this.InitPosition.x--this.BlockWidth»-this.HorizontalNum 判断 变型 后 x+ 它 的 宽度 
是 否 超过 地 图 的 宽度 


this.BlokCurrent=temp; 
this.BlockHeight=this.GetHeight(this.BlokCurrent) 
this.BlockWidth=this.GetWidth(this.BlokCurrent); 


} 
this.SettingBlock(); 

J 

CheckFull:fonction0{V 检 测 是 否 有 满 行 的 
var arr=[]; 


for(var i=0;i<this. VerticalNum;i++){ 
var flag=true; 
for(var j=0;j<this.HorizontalNum;j++){ 
1f(this.GameMap|i][j]==0)í 


flag=false; 
break; 
j 
j 
if(flag)( 
this.ClearFull(1); 
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lio 


ClearFull:function(index){// 清 除 满 行 的 ， 使 上 一 行 的 背景 图 等 于 该 行 ， 并 使 上 一 行 的 
坐标 值 等 于 该 行 ， 如 果 是 第 一 行 的 话 坐 标 值 清 0， 背 景 清空 


var tb = this.getTable(); 
if(index==0){ 
for(var i=0;i<this. HorizontalNum;it+){ 
this.GameMap[0][j]-0; 
tb.rows[i].cells[j J.style.backgroundImage-""; 


E) 


j 


else{ 
for(var i=index;i>0;i--){ 
for(var j=0;j<this.HorizontalNum;j++){ 
this. GameMapy[i][j ]-this. GameMap[i-1 ][j]; 
tb.rows[i].cells[j].style.backgroundImage-tb.rows[i-1 ].cells 


[j].style.backgroundImage; 


tb.rows[i].cells[j J.style.backgroundPosition-tb.rows[i-1].cells 


[J].style.backgroundPosition; 
j 


j 


this.getScore().innerHTML -parseInt(this.getScore().innerHTML))*this.ScoreIndex; 
j , 


NewBlock:function(){// 创 建 方块 ， 初 始 化 数据 
this.CurrentIndex=this.NextCurrentIndex;// 获 取 下 一 个 方块 的 索引 作为 当前 索引 
this.BlokCurrent=this.BlogsSetting[this.CurrentIndex];// 根 据 获得 的 新 索引 重新 获 


取 方 块 


this.BlockWidth=this.GetWidth(this.BlokCurrent);// 重 新 获取 方块 的 最 大 宽 值 
this.BlockHeight=this.GetHeight(this.BlokCurrent);// 重 新 获取 方块 的 最 大 高 值 
this.GetInitPosition0;/ 初 始 化 方块 出 现 的 坐标 


Jic 
GameOver:function(){// 游 戏 结束 后 补 齐 获得 当前 方块 ， 补 齐 地 图 空白 处 
var tb = this.getTable(); 
for(var i=this.IsOverIndex-1;i>=0;i--){// 循 环 空白 的 ISOverIndex-1 fT, 给 空白 的 行 
补 上 当前 方块 ， 从 最 高 值 递 件 。 减 1 是 因为 OverIndex 获取 的 是 被 占据 的 行 ， 所 以 减 1 为 空白 行 。 


for(var j=0;j<=this.BlockWidth;j++){ 
if(this.BlokCurrent[this.BlockHeight-i][j ]—1) 


tb.rows[i].cells[this.InitPosition.x- J.style.backgroundImage-"url 
(tetris.gif)"; 


EN 301 


HTML 5 天 发 从 入 门 到 精通 


tb.rows[i].cells 


[this.InitPosition.x-j].style.backgroundPosition-this.ColorEnum[this.CurrentIndex [0 |--" px "-""--this.Col 
orEnum[this.CurrentIndex || 1 |" px"; 


j 

this.IsPlay=false; 

alert(" 游 戏 结束 "); 
J 
SettingGameMap:function() I/ 设 置 游戏 地 图 被 占有 的 位 置 标记 为 1 

for(var i=0;i<=this.BlockHeight;i++) 

for(var j=0;j<=this.BlockWidth;j++) 
if(this.BlokCurrent[i][j]==1){ 
this.GameMapl[this.InitPosition.y+i][this.InitPosition.xtj]=1;// 减 1 是 
为 每 次 y 加 1， 然后 再 进行 判断 ， 所 以 当 碰 到 方块 或 底部 的 时 候 要 减 去 多 加 的 1 


Ba 


J 

Start:function(){// 游 戏 开始 
this.IsPlay=true; 
this.CurrentIndex-this.NextCurrentIndex; 
this.BlokCurrent-this.BlogsSetting[this.CurrentIndex |; 
this.BlockWidth-this.GetWidth(this.BlokCurrent); 
this.BlockHeight-this.GetHeight(this.BlokCurrent); 
this.GetInitPosition(); 
this. MoveDown(); 
this.CreateNextBlock(); 

Jo 

CreateNextBlock:function0{1/ 获 取 下 一 个 方块 的 索引 ， 并 显示 在 预览 区 域 中 
this.NextCurrentIndex-this.getRandom(); 
this.LoadPreview(this.NextCurrentIndex); 


J. 
GetHeight:function(blokArr){// 获 取 当 前 方块 不 是 0 的 最 大 高 值 
for(var i-blokArr.length-1;17—0;i--) 
for(var j=0;j<blokArr[i].length;j++) 
if(blok Arr[i][j]==1) 


return 1; 


h 
GetWidth:function(blokArr){// 获 取 当 前 方块 不 是 0 的 最 大 宽 值 
for(var 1=blokArr.length-1;i>=0;i--) 
for(var J=0;j<blokArr[il.length;j++) 
if(blok Arr[j][i]==1) 


return i; 
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jo 
GetInitPosition:function0{/ 获 取 方 块 的 初始 位 置 
this.InitPosition = (x:Math.floor((this.HorizontalNum-this.BlokSize)/2),y:-1] ; 


j ^ 

getRandom:function(){// 随 机 获得 7 种 方块 中 的 一 种 
return Math.floor(Math.random()*7); 

j -i 

getTable:function() í 
return document.getElementBylId("area"); 

J. 

getScore:function() í 
return document.getElementById("score"); 


J 
getRank:function() í 

return document. getElementById("rank"); 
j 


} 
var t = new Tetris(); 
var OverTime=null; 
var IsPause=false; 
var Speed=500; 
var btn_start; 
window.onload=InitGame; 
function InitGame()í 
t.CreateMap(); 
btn start = document.getElementByld("start"); 
btn start.onclick-function() í 
t.Start(); 
this.value-"P. 暂停 游戏 " 
OverTime=setInterval(MoveBoxDown,Speed); 
this.disabled="disabled"; 


-~ 


} 
function MoveBoxDown(){ 
t. MoveDown(); 
j 
function KeyDown(e)( 
1if(!t.IsPlay||t.ISOver)return; 
e-e||window.event; 
var keyCode = e.keyCode||e.which||e.charCode; 
switch(keyCode)( 
case 37:// 左 
1f(!IsPause)t. MoveLeft(); 
break; 
case 38:/ 上 
if('IsPause)t.ChangeBlock(); 
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break; 
case 39:// 右 
if(!IsPause)t.MoveRight(); 
break; 
case 40:// F 
if(!IsPause)t. MoveDown(); 
break; 
case 80://p 暂停 or 开始 
IsPause=!IsPause; 
if(IsPause)( 
btn start.value-"P. 开始 游戏 "; 
window.clearInterval(OverTime); 


| 

else{ 
btn_start.value="P 暂停 游戏 "; 
OverTime=setlnterval(MoveBoxDown,Speed); 

} 

break; 

} 
j 
</script> 


</head> 
<body onkeydown="KeyDown(event)"> 
<div id="map"></div> 
<div id="preview"> 
<br /> 


<div id="previewArea"></div> 


<div style-"margin-top: 10px;font-size:9pt;"><input id="start" type="button" value=" H 


F 始 游戏 " /><br 


/><br /> 得 分 : «span id="score">0</span><br /> 目前 排名 : <span id="rank"> 游 戏 结束 后 统计 </span> </div> 


«div style="border:2px solid green;padding-top:10px;padding-left:3px;padding-bottom:5px;width: 


168px;margin-top:10px;"> 


«div style="text-align:center;width:168px;font-size:10pt;font-weight:bold;padding-bottom:8px; 


color:Red;"> 俄 罗斯 方块 游戏 </div> 


«span style="font-size:9pti">&nbsp;&nbsp;&nbsp;&nbsp; 游 戏 规则 : 游戏 


J 


方向 键 控 制 。<br> 1: 方块 变型 «br 4 : 加 速 下 落 <br/> 一 : 向 右 移动 <br/> 一 : 问 左 移动 <br />P: 暂停 或 


全 洲 戏 </span> 


</div> 
</div> 
</body> 


</html> 
执行 后 的 效果 如 图 12-4 所 示 。 
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JavaScript 提醒 


P 暂停 游戏 | 


得 分 : 0 


目前 排名 : 游戏 结束 后 统计 


修罗 斯 方块 游戏 


游戏 规则 ; 游戏 由 + + 
一 * 方向 键 控制 。 
+ ; 方块 变型 
V: 加 速 下落 


游戏 结束 


=: 向 右 移 动 
<: 向 左 移动 
P ; 暂停 或 开始 游戏 


图 12-4 执行 效果 


12.5 开发 一 个 网 页 版 的 抽奖 游戏 


实例 12-5 说 — HJ 
源码 路 径 光盘 \daimaN10\S.html 
功能 开发 一 个 网 页 版 的 抽奖 游戏 
在 本 实例 中 加 入 了 缓冲 停止 功能 ， 并 且 具 有 慢 和 慢 加 速 等 功能 。 实 例文 件 5.html 的 实现 
代码 如 下 。 
<!DOCTYPE html> 
<head> 
<title>js 抽奖 </title> 


«style type="text/css"> 

*{ margin: 0; padding: 0; font-size: 12px;) 

body { background-color: #2C1914;font-family:" 宋 体 "; | 
a img, ul, li { list-style: none; } 
a(text-decoration:none; outline:none; font-size: 12px;) 
input, textarea, select, button í font-size: 10096; 
.abs{ position:absolute;) 

Tel{ position:relative;) 

.Wrap{ min-height: 1000px; | 

.main{ height:718px; } 

.con980 í width:980px; margin:0 auto;} 

.header{ width:100%; height:SOpx;} 
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.play ( background:url() no-repeat; width:980px; height:625px; padding:22px 0 0 21px;} 
td (width:187px; height:115px; font-family:" 微 软 雅 黑 "; background-color:#666; text-align:center; line- 
height:115px; font-size:80px; } 


.playcurr{ background-color:#F60;} 
.playnormal{ background-color:#666;} 
.play_btn{ width:480px; height:ll5px; display:block; background-color:#F60;border:0; cursor: 
pointer; font-family:" 微 软 雅 黑 "， font-size:40px;) 
.play_btn:hover{ background-position:0 -115px;) 
.btn arr( left:255px; top:255px;] 
</style> 
</head> 
<body> 
<div class="wrap"> 
<div class="header"></div> 
<div class="main"> 
<div class="con980"> 
<div class="play rel"> 
<p class="btn_arr abs"><input value=" 点 击 领 奖 " id="btn1" type="button" 


onclick="StartGame()" class-"play btn" ></p> 
«table class-"playtab" id="tb" cellpadding="0" cellspacing="1"> 
<tr> 

<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> 
</tr> 
<tr> 

<td>16</td><td></td><td></td><td></td><td>6</td> 
</tr> 
«tr 

<td>15</td><td></td><td></td><td></td><td>7</td> 
</tr> 
<tr> 

<td>14</td><td></td><td></td><td></td><td>8</td> 
</tr> 
<tr> 

<td>13</td><td>12</td><td>1 1</td><td>10</td><td>9</td> 
</tr> 
</table> 

</div> 
</div> 
</div> 

</div> 


<script type="text/javascript"> 


[* 
* 删除 左右 两 端的 空格 
B5 
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var index=0, /当前 亮 区 位 置 
prevIndex-0, /前 一 位 置 
Speed-300, /初始 速度 
Time, /定义 对 象 
arr = GetSide(5,5), /初始 化 数组 
EndIndex=0， /决定 在 哪 一 格 变 慢 
tb = document.getBlementById("tb"), // 获 取 了 tb 对象 
cycle-0, /转动 圈 数 
EndCycle-0, // 计 算 圈 数 
flag=false, // 结 束 转动 标志 
quick=0; /加 速 


btn = document.getElementByld("btn1") 


function StartGame()( 
clearInterval(Time); 

cycle-0; 
flag-false; 
EndIndex-Math.floor(Math.random()*16); 
//EndCycle-Math.floor(Math.random()*4); 
EndCycle-1; 
Time = setInterval(Star, Speed); 


function Star(num)( 
/跑马 灯 变 速 
if(flag==false){ 
// 走 五 格 开始 加 速 
if(quick==5){ 
clearInterval(Time); 
Speed=50; 
Time=setlnterval(Star,Speed); 


j 

// 跑 NN 圈 减 速 

这 cycle==EndCycle+l && index==parseInt(EndIndex)){ 
clearInterval(Time); 
Speed-300; 
flag-true; /触发 结束 
Time-setInterval(Star,Speed); 


if(index--arr.length)( 
index-0; 
cycle; 
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/结束 转动 并 选中 号 码 
//trim 里 改 成 数字 就 可 以 减速 ， 变 成 Endindex 的 话 就 没有 减速 效果 了 
if(flag==true && index==parseInt(Trim(3))-1){ 
quick=0; 
clearInterval(Time); 
j 
tb.rows[arr[index ][0]].cells[arr[index][1]].className-"playcurr"; 
if(index^0) 
prevIndex-index-1; 
else{ 
prevlndex=arr.length-1; 


j 
tb.rows[arr[prevIndex ][0]].cells[arr[prevIndex][1]].className-"playnormal"; 


index; 
quick; 


} 


</script> 
</body> 
</html> 


执行 后 的 效果 如 图 12-5 所 示 。 


图 12-5 执行 效果 
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经 过 前 面 的 学 习 ， 用 户 应 该 知道 在 HTML 5 网 页 中 通过 使 用 <canvas>， 可 以 在 页 面 中 直 
接 进 行 各 种 复杂 图 形 的 制作 。 但 是 使 用 <canvas> 元 素 的 方法 比较 复杂 ， 要 想 完全 掌握 ， 需 要 
付出 很 多 时 间 和 精力 。RGraph 是 一 球 国 外 开发 的 利用 HTML 5 中 <canvas> 元 素 进 行 专业 统 
计 图 制作 的 插件 。 本 章 将 详细 介绍 使 用 插件 RGraph 的 方法 ， 并 通过 具体 实例 来 演示 具体 使 
用 流程 。 


13.1 ”使 用 插件 RGraph 制作 柱状 图 


实例 13-1 说 明 
源码 路 径 J63iiNdaima M 3M .html 
功能 使 用 插件 RGraph 制作 柱状 图 


本 实例 的 功能 为 显示 2012 EX X 啤 酒 销售 情况 的 统计 柱状 图 。 实例 文件 1.html 的 具体 实 
现代 码 如 下 。 


<!DOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<title> 使 用 RGraph 插件 制作 柱状 图 </title> 
«script src="RGraph.common.core.Js"></script> 


«script src="RGraph.bar.js"></script> 

<script> 

function window onload() 

1 
/绘制 柱状 图 ， 指 定数 据 
myGraph = new RGraph.Bar('myCanvas',[1200,1300,1400,1500,3000, 1900,2000,2100, 
2500,2700,1400,2600]); 

/指定 统计 图 标题 

myGraph.Set('chart.title'2012 年 XX 啤酒 销售 图 '); 
// 指 定 X 轴 标 题 
myGraph.Set('chart.title.xaxis',' 销 售 月 份 '); 
/指定 立轴 标题 
myGraph.Set('chart.title.yaxis', 4j 8 4 8); 
IHR XE X 轴 的 坐标 轴 文 字 
myGraph. Set('chart.labels',['1 月 ','2 
"jb Jta hs 


]'3 月 ,4 J''5 H''6 ]7 H''8 H'o H'0 月 ,， 


第 13 章 统计 图 实战 


// 指 定 Y 轴 的 坐标 轴 文 字 
myGraph.Set('chart.ylabels.specific',['3000','2500','2000','1500'.'1000','500']); 
/指定 在 坐标 轴 顶 部 绘制 说 明 销 售 数量 的 文字 
myGraph.Set('chart.labels.above', true); 

/指定 网 格 自动 与 坐标 轴 单 位 对 章 
myGraph.Set('chart.background.grid.autofit', true); 
myGraph.Set('chart.background.grid.autofit.align', true); 

/指定 标签 文字 所 使 用 的 空间 尺 才 

myGraph.Set('chart.gutter',65); 

/绘制 柱状 图 
myGraph.Draw(); 


j 

</script> 

</head> 

<body onload="window_onload()"> 

<h1>2012 4E X X 啤酒 销售 图 (单位 : JURO «hl 

<canvas id="myCanvas" width="700" height="400"> 
[您 的 浏览 器 不 支持 canvas 元 素 ] 

</canvas> 

</body> 

</html> 


执行 后 的 效果 如 图 13-1 所 示 。 
2012 年 X X 啤酒 销售 图 (单位 : 万 瓶 ) 


20124x 义 啤酒 销售 图 


3,000 


图 13-1 执行 效果 


13.2 ”改变 选中 柱状 图 的 颜色 


在 HTML 5 网 页 中 绘制 柱状 图 时 ， 可 以 使 用 方法 obj.getBar 使 开发 者 或 用 户 知道 哪个 柱 
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子 被 单 击 或 获得 鼠标 焦点 。 方 法 obj.getBar 返回 一 个 数组 ， 在 数组 中 可 以 保存 下 面 的 信息 : 

(1) 绘制 统计 图 对 象 的 <canvas> 元 素 。 
(2) 被 单 击 柱子 的 绘制 起 点 在 广 轴 上 的 坐标 点 。 
(3) 被 单 击 柱子 的 绘制 起 点 在 立轴 上 的 坐标 点 。 
(4) 被 单 击 柱子 的 宽度 。 
(5) 被 单 击 柱子 的 高 度 。 
(6) 被 单 击 柱子 的 序号 ， 标 示 第 几 根 柱子 被 单 击 。 

实例 13-2 说 H 

源码 路 径 GS Ndaima M3. html 

功能 改变 选中 柱状 图 的 颜色 

本 实例 在 实例 13-1 的 基础 上 进行 了 修改 ， 每 当 单 击 柱状 图 中 的 一 根 柱 子 时 ， 都 会 使 这 根 


> 


主子 变 颜色 。 实 例文 件 2.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<title> 使 用 RGraph 插件 制作 柱状 图 </title> 
«script src="RGraph.common.core.Js"></script> 


«script src="RGraph.bar.js"></script> 


<script> 
/指定 颜色 数组 ， 用 于 变换 颜色 
var color=new Array; 


color[0]='red'; 

color[1]-" green'; 

color[2]-" blue"; 

function window onload() 
1 


/绘制 柱状 


图 ， 指 定数 据 


myGraph = new RGraph.Bar('myCanvas',[1400,1300,1500,1600,1800,1900,2000,1200, 


1800,2700,14100,900]); 


HT Hrs 月 "9 月 ,10 月， 


// 指 定 统计 图 标题 
myGraph.Set('chart.title', 2012 年 X X Iit] 销售 柱状 KIN; 
/指定 X 轴 标 题 
myGraph.Set('chart.title.xaxis',' 销 售 月 份 '); 
IHE XE. Y. 轴 标 题 
myGraph.Set('chart.title.yaxis',' 销 售 数量 '); 
IHR x X 轴 的 坐标 轴 文 字 
myGraph.Set('chart.labels'['1 月 2 月 ,3 月 ,4 月 ,5 H'/6 
T1 532 HD; 
/指定 Y 轴 的 坐标 轴 文 字 
myGraph.Set('chart.ylabels.specific',|['3000'.'2500','2000','1500','1000'.'500']); 
/指定 在 坐标 轴 顶 部 绘制 说 明 销 售 数量 的 文学 


myGraph.Set('chart.labels.above', true); 
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// 指 定 网 格 自动 与 坐标 轴 单 位 对 齐 
myGraph.Set('chart.background.grid.autofit', true); 


myGraph.Set('chart.background.grid.autofit.align', true); 
/指定 标签 文字 所 使 用 的 空间 尺寸 
myGraph.Set('chart.gutter',65); 

/绘制 柱状 图 
myGraph.Draw(); 

/注册 控件 
RGraph.Register(myGraph); 

var 二 0;// 填 充 时 使 用 颜色 的 颜色 序号 
myGraph.canvas.onclick = function (e) 


1 


RGraph.Redraw0;/ 重 绘 统计 图 


var canvas =e.target;// 获 取 被 点 击 的 canvas 元 素 
var context = canvas.getContext('2d");// 获 取 该 canvas 元 素 的 图 形 上 下 文 对 象 
var obj = canvas. object _;/ 获 取 统 计 图 对 象 

var coords = obj.getBar(e);/ 获 取 被 点 击 的 柱子 信息 


if (coords) í 
vartop ”=coords[1];// 获 取 被 点 击 柱 子 的 X 轴 上 的 坐标 起 点 
var left ”三 coords[2];// 获 取 被 点 击 柱子 的 Y 轴 上 的 坐标 起 点 
var width = coords[3];// 获 取 被 点 击 柱 子 的 宽度 
var height = coords[4];// 获 取 被 点 击 柱子 的 高 度 


+ 


context.beginPath(0;// 开 始 创建 路 径 
context.strokeStyle = 'black';// 指 定 柱 子 的 边框 颜色 
context.fillStyle =color[i%3];// 指 定 柱 子 的 填充 颜色 
计 =1;// 指 定 下 次 使 用 颜色 的 颜色 编号 
context.strokeRect(top, left, width, height);// 绘 制 柱子 边 放 
context.fillRect(top, left, width, height);// 填 充 柱 子 


IHI 


j 

</script> 

</head> 

<body onload="window_onload()"> 

<canvas id="myCanvas" width="700" height="400"> 
[您 的 浏览 器 不 支持 canvas 元 素 ] 

</canvas> 

</body> 

</html> 


执行 后 的 效果 如 图 13-2 所 示 。 
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1,600 ,1,800 1,900 


1,400 1,300 „4500 


6H 7H 


HSHH 
图 13-2 执行 效果 


13.3 ”在 网 页 中 绘制 分 组 柱状 图 


实例 13-3 说 — UJ 
源码 路 径 光盘 \daima\13\3.html 
功能 在 网 页 中 绘制 分 组 柱状 图 


本 实例 的 功能 是 在 水 平 坐标 轴 的 一 个 坐标 单位 上 绘制 很 多 根 柱子 ， 通 过 柱状 图 演示 了 
2012 年 XX 啤 酒 的 销售 情况 。 在 一 个 月 份 中 绘制 两 根 柱子 ， ec ss H4 
HERE, JE f ARERR ZH 1 OR BC. O a 绿色 绘制 两 种 不 同 的 
柱子 ， 在 图 例 中 说 明 蓝 色 柱子 表示 瓶装 类 的 销售 数量 ， 绿 色 柱 子 表 示 饶 装 类 的 销售 数量 ， 在 


每 根 柱子 顶部 绘制 该 柱子 所 代表 的 销售 数量 。 实 例文 件 3.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 

<head> 

«meta charset="UTF-8"> 

<title> 使 用 RGraph 插件 制作 柱状 图 </title> 
«script src="RGraph.common.core.js"></script> 
«script src="RGraph.bar.js"></script> 

<script> 

function window onload() 


i 


/绘制 分 组 柱状 图 ， 指 定数 据 

myGraph = new RGraph.Bar('myCanvas',[[1200,1600],[1300,1200],[1400,1200], 
[1500,1600],[3000,1800],[1900,1200],[2000,1600],[2100,1900], 
[2500,1 100],[2700,1000],[1400, 1600],[2600,1200]]); 

/指定 统计 图 标题 

myGraph.Set('chart.title''2012 年 久久 啤酒 的 销售 情况 ); 

/指定 X 轴 标 题 

myGraph.Set('chart.title.xaxis', 4j 8: H £1"); 
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/指定 立轴 标题 
myGraph.Set('chart.title.yaxis',' 销 售 数量 '); 
// 指 定 柱 状 图 图 例 被 绘制 在 图 例 区 域 中 
myGraph.Set('chart.key.position', 'graph"); 
/指定 图 例文 字 
myGraph.Set('chart.key', [瓶装 类 ', ' 铅 装 类 ']); 
/指定 柱子 颜色 
myGraph.Set('chart.colors', ['blue', 'green']); 
/指定 广 轴 的 坐标 轴 文 字 
myGraph.Set('chart.labels'['1 月 ,2 
"ii JS) 1255]: 
/指定 立轴 的 坐标 轴 文 字 
myGraph.Set('chart.ylabels.specific',['3000',2500',2000',1500',1000',500']); 
/指定 在 坐标 轴 顶 部 绘制 说 明 销 售 面积 的 文字 
myGraph.Set('chart.labels.above',true); 
// 用 文字 说 明 销 售 量 最 少 的 柱子 
myGraph.Set('chart.labels.ingraph', [19,' 销 售 最 少 ']); 
/指定 网 格 自动 与 坐标 轴 单 位 对 章 
myGraph.Set('chart.background.grid.autofit', true); 


LI 


1,3 月 ,4 1,5 H''6 月 ,7 月 ,8 月 "9 月 ,10 H', 


myGraph.Set('chart.background.grid.autofit.align', true); 
/指定 标签 文字 所 使 用 的 空间 尺寸 
myGraph.Set('chart.gutter',65); 

myGraph.Draw(); 


} 

</script> 

</head> 

<body onload="window_onload()"> 

<canvas id="myCanvas" width="900" height="400"> 
[您 的 浏览 器 不 支持 canvas 元 素 ] 

</canvas> 

</body> 

</html> 


执行 后 的 效果 如 图 13-3 所 示 。 


销售 数量 


20124FX X 啤 酒 的 销售 情况 


3.000 


图 13-3 执行 效果 


第 13 章 “统计 图 实战 | 


EB 315 


HTML 5 天 发 从 入 门 到 精通 


13.4 ”将 柱状 图 的 同一 根 柱子 设置 为 不 同 的 颜色 


本 实例 的 功能 是 显示 2012 年 xX X 啤酒 瓶 装 类 与 


实例 的 说 明 方法 不 是 在 一 个 月 份 中 使 用 两 种 颜色 的 相 
上 不 同 颜色 绘制 在 同一 根 柱子 ， 
-部 绘制 用 来 说 明 铅 装 类 销售 数量 的 蓝 色 柱 


月 销量 月 


柱子 ， 在 柱子 的 


4 


。 在 柱子 的 


HERK 


下 部 绘制 


pt o 2639 


可 以 看 出 两 类 产品 各 


的 销售 数量 ， 又 可 以 直接 看 


种 类 型 产品 
: 子 ， 而 是 将 瓶装 与 镶 装 这 两 和 
售 数 量 的 绿 
Hie TB 


用 来 说 明 瓶装 类 名 
子 。 使 用 这 种 方法 的 妇 
H 这 两 类 产品 的 销售 总 数量 。 


6 销售 情况 , 但 本 
[产品 的 每 


色 


L= 


实例 文件 4.html 的 
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实例 13-4 说 明 
源码 路 径 J63iiNdaima M 3M.html 
功能 将 柱状 图 的 同一 根 柱 子 设置 为 不 同 的 颜色 


\ 体 实现 代码 如 下 。 


<!DOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<title> 使 用 RGraph 插件 制作 柱状 图 </title> 


«script src="RGraph.common.core.Js"></script> 


«script strc="RGraph.bar.js"></script> 
<script> 
function window_onload() 


1 
/绘制 分 组 柱状 图 ， 指 定数 据 


myGraph = new RGraph.Bar('myCanvas',[[1200,1600],[1300,1200],[1400,1200], 
[1500,1600],[3000,1800],[1900,1200],[2000,1600],[2100,1900],[2500,1100], 


[2700,1000],[1400,1600],[2600,1200]]); 
// 指 定 统 计 图 标题 
myGraph.Set('chart.title','2012 4F X X nij 
/指定 X 轴 标 题 
myGraph.Set('chart.title.xaxis', Ej H); 
/指定 立轴 标题 
myGraph.Set('chart.title.yaxis',' 销 售 数量 '); 
/指定 柱状 图 图 例 被 绘制 在 图 例 区 域 中 

myGraph.Set('chart.key.position', 'graph'); 
/指定 图 例文 字 

myGraph.Set('chart.key', [瓶装 类 ', ' 铅 装 类 ']); 
/指定 柱子 颜色 
myGraph.Set('chart.colors', ['blue', 'green']); 
IHR XE X 轴 的 坐标 轴 文 字 
myGraph. Set('chart.labels',['1 月 ,2 
BIEN 120: 
/指定 立轴 的 坐标 多 


H'3 月 ,4 


PE 


销售 统计 图 ); 


j s H''6 


By JB Jë 


vo 月 "10 月 ， 


myGraph.Set('chart.ylabels.specific',['5000','4500','4000','3500','3000','2500','2000', 
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'1500','1000','500']); 
/指定 在 坐标 轴 顶 部 绘制 说 明 销售 总 面积 的 文字 
myGraph.Set('chart.labels.above',true); 

/指定 网 格 自 动 与 坐标 轴 单 位 对 齐 
myGraph.Set('chart.background.grid.autofit', true); 


n 


myGraph.Set('chart.background.grid.autofit.align', true); 
/指定 标签 文字 所 使 用 的 空间 尺寸 

myGraph. Set('chart. gutter',65); 

/设置 分 组 柱状 图 的 绘制 方式 

myGraph.Set('chart. grouping', 'stacked"); 


myGraph.Draw(); 
} 
</script> 
</head> 
<body onload="window_onload()"> 
<canvas id="myCanvas" width="900" height="400"> 
[您 的 浏览 器 不 支持 canvas 元 素 ] 
</canvas> 
</body> 
</html> 


执行 后 的 效果 如 图 13-4 所 示 。 


2012 年 x X 啤 酒 销售 统计 图 


4800 


图 13-4 ”执行 效果 


13.5 ”在 网 页 中 绘制 一 个 折线 图 


本 实例 的 功能 是 显示 2012 年 X 义 啤酒 瓶装 类 产品 的 销售 情况 ， 和 本 章 前 面 实例 的 区 别 
是 ， 不 再 使 用 柱状 图 来 体现 ， 而 是 使 用 折线 图 来 体现 。 
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实例 13-5 说 明 
源码 路 径 光盘 \daimaN13\S.html 
功能 在 网 页 中 绘制 一 个 折线 图 


实例 文件 5.html 的 实现 代码 如 下 。 
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<!DOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<title> 使 用 RGraph 插件 制作 折线 图 </title> 


«script strc="RGraph.common.core.js"></script> 


«script src="RGraph.line.Js"></script> 
«script src="RGraph.common.tooltips.js"></script> 


<script> 
function window onload() 


1 


/绘制 折线 图 ， 指 定数 据 
var myGraph = new RGraph.Line('myCanvas', 


[1200,1300,1400,1500,3000,1900,2000,2100,2500,2700,1400,2600]); 

/指定 折线 图 标题 

myGraph. Set('chart.title''2012 年 多久 啤酒 瓶装 类 产品 的 销售 情况 ); 
/指定 X 轴 标 题 

myGraph.Set('chart.title.xaxis', 月份); 

/指定 Y 轴 标 题 

myGraph.Set('chart.title.yaxis',' 数 量 '); 

// 指 定 X 轴 的 坐标 轴 文 字 

myGraph.Set('chart.labels', [1 月 ,2 月 ,3 月 ,4 H''s 月 ,6 月 ','7 月 ','8 月 ','9 


H'12 H']; 
// 指 定 Y 轴 的 坐标 轴 文 字 
myGraph.Set('chart.ylabels.specific',['3000',2500',2000',1500',1000',500']); 
/指定 在 折线 连接 点 处 绘制 说 明 销售 数量 的 文字 
myGraph.Set('chart.labels.above', true); 

/指定 网 格 颜色 
myGraph.Set('chart.background.grid.color', 'rgba(238,238,238,1); 
/指定 标签 文字 的 绘制 空间 
myGraph.Set('chart.gutter', 60); 
/绘制 折线 图 
myGraph.Draw(); 


| 

</script> 

</head> 

<body onload="window_onload()"> 

<canvas id="myCanvas" width="700" height="400"> 


H''10 


Veg 
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[您 的 浏览 器 不 文 持 canvas 元 素 ] 


</canvas> 
</body> 
</html> 


执行 后 的 效果 如 图 13-5 所 示 。 
2012 年 x x 啤酒 瓶装 类 产品 的 销售 情况 


3,000 


3000 
A 2,700 


/ 2,500. 
2500 / N — / 


/ 2,100 N Fi 


2,000] — 
2000 / 1900 一 一 N / 


AB 


图 13-5 执行 效果 


13.6 “在 网 页 中 实现 一 个 显示 提示 的 折线 图 


本 实例 的 功能 是 ， 使 用 方法 obj.getPoint 绘制 能 够 显示 提示 的 折线 图 。 该 方法 能 够 返回 一 


个 数组 ， 在 其 中 保存 了 如 下 信息 。 


O 绘制 统计 图 对 象 的 <canvas> 元 素 。 

口 获得 鼠标 焦点 的 连接 点 在 X 轴 上 的 坐标 点 。 

口 获得 鼠标 焦点 的 连接 点 在 Y 轴 上 的 坐标 点 。 

口 获得 鼠标 焦点 的 连接 点 的 序号 ， 标 示 第 几 个 连接 点 获得 了 鼠标 焦点 。 

当 本 实例 连接 点 获得 鼠标 焦点 时 ， 鼠 标 指针 会 从 指针 形状 变 成 手指 形状 ， 该 连接 点 处 也 


会 突出 显示 一 个 蓝 色 实心 圆 ， 同 时 出 现 一 个 工具 条 提示 信息 ， 说 明 该 连接 点 是 水 平 坐标 轴 上 
哪 一 个 绘制 单位 的 连接 点 ， 在 本 实例 的 工具 条 提示 中 显示 月 份 信息 。 
实例 13-6 说 — Hj 
源码 路 径 光盘 \daimaN13\6.html 
功能 在 网 页 中 实现 一 个 显示 提示 的 折线 图 


实例 文件 6.html 的 实现 代码 如 下 。 


EN 319 


HTML 5 天 发 从 入 门 到 精通 


320 ma 


<!DOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<title> 使 用 RGraph 插件 制作 折线 图 </title> 


«script src="RGraph.common.core.Js"></script> 


«script src="RGraph.line.js"></script> 
«script src-"RGraph.common.tooltips.js"7«/script^ 


<script> 
function window onload() 
1 
/绘制 折线 图 ， 指 定数 据 
var myGraph = new RGraph.Line('myCanvas',[1200,1300,1400,1500,3000,1900,2000, 
2100,2500,2700,1400,2600]); 
/指定 折线 图 标题 
myGraph.Set('chart.title''2012 年 X X 啤酒 瓶装 类 产品 的 销售 情况 "); 
/指定 和 轴 标 题 
myGraph.Set('chart.title.xaxis', 月份 ); 
/指定 立轴 标题 
myGraph.Set('chart.title.yaxis', Ji 5"); 
/指定 和 X 轴 的 坐标 轴 文 字 
myGraph.Set('chart.labels', [1 月 ,2 H';3 月 ,4 H'/5 H'/6 月 ,7 月 ','8 月 9 月 ','10 月， 
"1 A12 H'D: 
/指定 立轴 的 坐标 轴 文 字 
myGraph.Set('chart.ylabels.specific',['3000',2500',2000',1500',1000',500']); 
/指定 在 折线 连接 点 处 绘制 说 明 销售 数量 的 文字 
myGraph.Set('chart.labels.above', true); 
/指定 网 格 颜色 
myGraph.Set('chart.background.grid.color', rgba(238,238,238,1)'); 
/指定 标签 文字 的 绘制 空间 
myGraph.Set('chart. gutter', 60); 
/绘制 折线 图 
myGraph.Draw(); 
/注册 控件 
RGraph.Register(myGraph); 
/书写 鼠标 在 折线 图 上 移动 时 的 函数 
myGraph.canvas.onmousemove = function (e) 


1 


/注册 事件 
RGraph.FixEventObject(e); 


var canvas = etarget;/ 获 得 绘制 折线 图 的 canvas 元 素 
var context = canvas.getContext(2d);/ 获 得 绘制 折线 图 的 canvas 元 素 的 图 形 上 下 文 对 象 
Var obj = e.target. object_;/ 获 得 事件 对 象 


/ 使 用 getPoint 方法 来 得 到 取得 光标 焦点 的 连接 点 
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var point = obj.getPoint(e); 


if (point) /如 果 存 在 取得 光标 焦点 的 连接 点 
{ 


canvas.style.cursor = 'pointer';// 改 变 限 标 指针 为 手指 形状 


/如 果 工 具 条 提示 已 经 被 显示 

if (RGraph.Registry.Get('chart.tooltip') 

&& RGraph.Registry.Get('chart.tooltip). index == point[3]) í 
return; 


/ 重 绘 折线 图 
RGraph.Redraw(); 


// 显 示 工 具 条 提示 
RGraph.Tooltip(canvas, obj.Get('chart.labels')[point[3]], e.pageX, e.pageY, 
point[3 |); 


/突出 显示 连接 点 
context.fillStyle = 'blue';// 使 用 蓝 色 填充 

context.beginPath0;// 开 始 创建 路 径 

context.moveTo(point[1], point[2]);// 绘 制 起 点 移动 到 连接 点 上 
context.arc(point[1], point[2], 4, 0, 6.26, 0);/ 创 建 圆 形 路 径 
context.fill();//38 75 [i] ES] 


=l 


六 


return; 


} 
canvas.style.cursor = 'default;/ 恢 复 默认 鼠标 指针 


j 
// 在 其 他 位 置 处 点 击 鼠 标 时 取消 当前 显示 的 工具 条 提示 信息 及 蓝 色 放大 折线 点 
window.onclick = function () 


{ 


RGraph.Redraw(); 
} 
</script> 
</head> 
<body onload="window_onload()"> 
<canvas id="myCanvas" width="700" height="400"> 
[您 的 浏览 器 不 支持 canvas 元 素 ] 
</canvas> 
</body> 


</html> 
执行 后 的 效果 如 图 13-6 所 示 。 
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图 13-6 执行 效果 


13.7 在 网 页 中 绘制 多 根 折线 


本 实例 的 功能 是 在 一 个 折线 图 中 绘制 多 根 折线 。 本 实例 折线 图 表现 的 是 2012 fF X x ning 
瓶装 类 与 饶 装 类 产品 的 销售 情况 。 


实例 13-7 说 HJ 
源码 路 径 光盘 \daima\13\7.html 
功能 在 网 页 中 绘制 多 根 折线 


实例 文件 7.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 

<head> 

«meta charset="UTF-8"> 

<title> 使 用 RGraph 插件 制作 折线 图 </title> 


«script src="RGraph.common.core.Js"></script> 


«script src="RGraph.line.js"></script> 

«script src="RGraph.common.tooltips.js"></script> 

<script> 

function window onload() 

1 

/绘制 折线 图 ， 指 定数 据 
myGraph = new RGraph.Line('myCanvas',[1200,1300,1400,1500,3000, 1900,2000,2100,2500,2700, 

1400,2600],[1600,1200,1200,1600,1800,1200,1200,1600,1900, 


1100,1000,1600]); 
/指定 折线 图 标题 
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myGraph.Set('chart.title'/2012 年 XX 啤酒 销售 状况 (单位 ， 瓶 ) 5; 
IHE X 轴 标 题 
myGraph.Set('chart.title.xaxis', 月份 ); 
/指定 立轴 标题 
myGraph.Set('chart.title.yaxis',' 数 量 '); 
/指定 折线 图 例 被 绘制 在 图 例 区 域 中 
myGraph.Set('chart.key.position', 'graph"); 
/指定 图 例文 字 
myGraph.Set('chart.key', [瓶装 类 ', ' 饶 装 类 ']); 
/指定 折线 颜色 
myGraph.Set('chart.colors', ['blue', 'green']); 
/指定 广 轴 的 坐标 轴 文 字 
myGraph.Set('chart.labels', ['1 H'/2 H'/3 月 ,4 月 "5 H'/6 H7 月 ,8 月 ,9 
BIEN STONES TS 
/指定 立轴 的 坐标 轴 文 字 
myGraph.Set('chart.ylabels.specific',['3000',2500',2000',1500',1000',500']; 
/指定 线 宽 
myGraph.Set('chart.linewidth', 5); 
/指定 网 格 颜色 
myGraph.Set('chart.backeround.grid.color', rgba(238,238,238,1)'); 
/指定 标签 文字 的 绘制 空间 
myGraph.Set('chart.gutter', 60); 
/绘制 折线 图 
myGraph.Draw(); 


} 

</script> 

</head> 

<body onload="window_onload()"> 

<canvas id="myCanvas" width="700" height="400"> 
[您 的 浏览 器 不 支持 canvas 元 素 ] 

</canvas> 

</body> 

</html> 


执行 后 的 效果 如 图 13-7 所 示 。 
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图 13-7 执行 效果 
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13.8 ”绘制 范围 折线 图 


本 实例 的 功能 是 在 HTML 5 网 页 中 绘制 一 个 范围 折线 图 。 范 围 折线 图 是 指 绘制 上 下 两 根 
折线 ， 上 部 的 折线 用 于 反映 统计 范围 内 的 峰值 ， 下 部 的 折线 用 于 反映 统计 范围 内 的 谷 值 ， 然 
后 用 某 种 颜色 填充 上 下 两 根 折线 之 间 的 封闭 区 域 ， 使 人 能 够 一 目 了 然 地 看 清 每 一 个 绘制 单位 
《例如 每 个 月 ) 中 某 个 统计 值 的 峰值 与 谷 值 情况 。 


实例 13-8 j — Hj 
源码 路 径 光盘 \daima\13\8.html 
功能 在 网 页 中 绘制 范围 折线 图 


本 实例 反映 了 2012 年 X 义 啤酒 瓶装 类 产品 的 销售 情况 , 上 部 的 折线 反映 每 个 月 中 的 销售 


峰值 ， 即 最 多 一 天 能 卖 掉 多 少 瓶 ， 下 部 的 折线 反映 每 个 月 的 销售 谷 值 ， 即 最 少 一 天 能 卖 掉 多 
少 瓶 。 实 例文 件 8.html 的 具体 实现 代码 如 下 。 


<!DOCTYPE html> 

<head> 

«meta charset="UTF-8"> 

<title> 使 用 RGraph 插件 制作 折线 图 </title> 


«script strc="RGraph.common.core.js"></script> 


«script src="RGraph.line.Js"></script> 
«script src="RGraph.common.tooltips.js"></script> 


<script> 
function window_onload() 
{ 
/绘制 折线 图 ， 指 定数 据 
myGraph = new RGraph.Line('myCanvas', 
[160,130,140,160,300,190,200,210,250,270,140,260], 
[120,120,120,150,180,120,120,160,190,110,100,160]); 
/指定 折线 图 标题 
myGraph.Set('chart.title', 2012 年 久久 啤酒 瓶装 类 的 销售 情况 (单位 : 万 瓶 )7; 
/指定 X 轴 标 题 
myGraph.Set('chart.title.xaxis',' 月 份 ); 
// 指 定 Y 轴 标 题 
myGraph.Set('chart.title.yaxis',' 数 量 '); 
/指定 折线 颜色 
myGraph.Set('chart.colors', ['blue']); 
/指定 X 轴 的 坐标 轴 文 学 
myGraph.Set('chart.labels', [1 月 ,2 月 ,3 月 ,4 月 ,5 月 ,6 H7 月 ','8 月 ,9 月 ,10 H', 
"b JEI JEME 
/HRXE Y 轴 的 坐标 轴 文 学 
myGraph. Set('chart.ylabels.specific',['300','250''200','150','100','50']); 
/指定 折线 区 域内 的 填充 颜色 


= 
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myGraph. Set('chart.fillstyle', lightgreen"); 
/用 指定 的 填充 颜色 填充 折线 内 部 区 域 
myGraph. Set('chart.filled',true); 
/指定 只 填充 上 下 两 根 折线 之 间 的 区 域 
myGraph. Set('chart.filled.range',true); 

/指定 网 格 颜色 

myGraph.Set('chart.background.grid.color', rgba(238,238,238,1)"); 
/指定 标签 文字 的 绘制 空间 
myGraph.Set('chart.gutter', 60); 
/绘制 折线 图 
myGraph.Draw(); 

j 

</script> 

</head> 

<body onload="window_onload()"> 

<canvas id="myCanvas" width="700" height="400"> 

[您 的 浏览 器 不 支持 canvas 元 素 ] 

</canvas> 

</body> 

</html> 


执行 后 的 效果 如 图 13-8 所 示 。 
2012 年 XX 啤酒 瘦 装 类 的 销售 情况 (单位 : 万 XR) 


图 13-8 执行 效果 


13.09 在 一 个 折线 图 中 使 用 左右 两 根 不 同 单位 的 垂直 坐标 轴 


本 实例 的 功能 是 ， 在 左右 两 根 垂 直 坐 标 轴 上 分 别 使 用 两 种 统计 单位 绘制 折线 图 的 示例 ， 
演示 了 2012 年 X 义 啤酒 瓶装 类 产品 的 销售 情况 。 这 一 次 在 折线 图 中 绘制 两 根 折线 ， 分 别 体现 
瓶装 类 的 销售 数量 与 销售 成 本 ， 左 边 的 垂直 坐标 轴 用 来 标注 瓶装 类 啤酒 的 销售 数量 ， 项 部 最 

EN 325 


c— 


[n 


HTML 5 天 发 从 入 门 到 精通 


大 刻度 为 3000 万 瓶 ， 右 边 的 垂直 坐标 轴 用 来 标注 销售 成 本 ， 顶 部 最 大 刻度 为 2000 万 元 。 


实例 13-9 j HJ 
源码 路 径 光盘 \daima\13\9.html 
功能 在 一 个 折线 图 中 使 用 左右 两 根 不 同 单位 的 垂直 坐标 轴 


实例 文件 9.html 的 实现 代码 如 下 。 
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«IDOCTYPE html> 

<head> 

«meta charset="UTF-8"> 

<title> 使 用 RGraph 插件 制作 折线 图 </title> 


«script strc="RGraph.common.core.js"></script> 


«script src="RGraph.line.Js"></script> 


«script stc="RGraph.common.tooltips.js"></script> 


<script> 


function window_onload() 


1 


/绘制 销售 数量 折线 图 ， 指 定数 据 
linel=newRGraph.Line(myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100， 
2500,2700,1400,2600]); 
/绘制 统计 图 标题 
linel.Set('chart.title', 2012 年 X X 啤 酒 瓶 装 类 产品 的 销售 情况 (单位 :万 瓶 )〉"); 
// 指 定 不 绘制 水 平 坐标 轴 
linel.Set('chart.noxaxis', true); 
/指定 左 侧 垂 直 坐 标 轴 上 标签 文字 的 后 绥 单 位 
line1.Set('chart.units.post', JN"); 
/指定 折线 图 线 宽 
linel.Set('chart.linewidth', 3); 
/指定 左 侧 垂 直 坐 标 轴 的 顶部 最 大 数字 
linel.Set('chart.ymax', 3000); 

/指定 标签 文字 的 绘制 空间 
linel.Set('chart.gutter',80); 
/绘制 销售 数量 折线 图 


linel.Draw(); 


/绘制 销售 成 本 折线 图 
line2 = new RGraph.Line('myCanvas',[1600,1200,1200,1600,1800,1200,1200, 
1600,1900,1100,1000,1600]); 
line2.Set('chart.units.post; 'JJ 76); 

/指定 和 轴 的 坐标 轴 文 字 

line2.Set('chart.labels', [1 月 ,2 H'/3 月 ,4 H'/5 月 "6 月 ,7 H''8 月 ,9 月 10 H' 
ALS PA AHD; 
/指定 折线 与 图 例 中 的 颜色 
line2.Set('chart.colors', ['blue', 'red']); 
// 指 定 图 例文 学 
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line2.Set('chart.key', [' 销 售 成 本 ', "销售 数量 "]); 
指定 销售 成 本 折线 图 的 垂直 坐标 轴 位 于 右 侧 
line2.Set('chart.yaxispos', 'right'); 

/指定 右 侧 垂直 坐标 轴 的 顶部 最 大 数学 
line2.Set('chart.ymax', 2000); 

/指定 右 侧 垂直 坐标 轴 上 标签 文字 的 前 绥 单 位 
line2.Set('chart.units.pre','¥); 
/指定 标签 文字 的 绘制 空间 
line2.Set('chart.gutter',80); 

/指定 线 宽 

line2.Set('chart.linewidth', 5); 
/指定 不 绘制 网 格 
line2.Set('chart.background.grid', false); 
/绘制 销售 成 本 折线 图 
line2.Draw(); 


E 
E 


j 


</script> 


</head> 

<body onload-"window onload(O"> 

«canvas id="myCanvas" width-" 700" height="400"> 
[您 的 浏览 器 不 支持 canvas 元 素 ] 

</canvas> 

</body> 

</html> 


执行 后 的 效果 如 图 13-9 所 示 。 
2012 年 青岛 啤酒 瓶装 类 产品 的 销售 情况 (单位 : JR) 


¥2,000 万 元 


| 国 销售 成 本 | 


|m 销售 数量 | 


¥1,600 万 元 
¥1,200 万 元 
¥800 万 元 


¥400 万 元 


12 月 
图 13-9 执行 效果 


13.10 ”在 一 个 统计 图 中 同时 绘制 柱状 图 与 折线 图 


本 实例 的 功能 是 , 在 HTML 5 网 页 中 同时 绘制 柱状 图 与 折线 图 。 本 实例 演示 了 2012 年 Xx 
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HTML 5 天 发 从 入 门 到 精通 


义 啤 酒 瓶 装 类 与 饶 装 类 两 种 产品 的 销售 情况 ， 使 用 折线 图 来 体现 瓶装 类 每 个 月 的 销售 数量 ， 
来 体现 饶 装 类 每 个 月 的 销售 数量 。 在 一 个 统计 图 中 同时 绘制 柱状 图 与 折线 图 的 关 


使 用 柱状 图 
键 在 于 ， 在 同一 个 <canvas> 元 素 中 绘制 一 个 柱 
上 去 为 一 个 统计 图 。 


mM 


大 图 与 一 个 折线 图 ， 然 后 通过 属性 设置 使 其 看 


实例 13-10 说 明 
源码 路 径 JG Ndaima M 3M0.html 
功能 在 一 个 统计 图 中 同时 绘制 柱状 图 与 折线 图 


实例 文件 10.html 的 实现 代码 如 下 。 


328 BH 


<!DOCTYPE html> 
<head> 


<meta 


<title> 


charset="UTF-8"> 
在 一 个 统计 图 中 同时 绘制 柱状 图 与 折线 图 </title> 


«script src="RGraph.common.core.Js"></script> 


«script src="RGraph.bar.js"></script> 


«script src="RGraph.line.Js"></script> 


<script> 


function window onload() 


1 


/绘制 柱状 图 ， 指 定数 据 

myBar = new RGraph.Bar('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100, 
2500,2700,1400,2600]); 

// 指 定 统计 图 标题 
myBar.Set('chart.title','2012 年 X XxX 啤酒 瓶装 类 与 钢 装 类 两 种 产品 的 销售 情况 "); 


// 


// 


Al 


/n 
myBar. Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']); 


// 


// 


指定 X 轴 标 题 
myBar.Set('chart.title.xaxis',' 月份); 
指定 立轴 标题 
myBar.Set('chart.title.yaxis', Zt"); 
/H 
myBar.Set('chart.labels' [1 H'/2 H'/3 H'/4 H'/5 H'/6 月 ,7 月 ,8 月 ,9 月 ,10 H', 


E 


HJE 广 轴 的 坐标 轴 文 字 


1 12 A 
HA Y 轴 的 坐标 轴 文 字 


指定 网 格 自动 与 坐标 轴 单 位 对 齐 


myBar.Set('chart.background.grid.autofit', true); 
myBar.Set('chart.background.grid.autofit.align', true); 


指定 标签 文字 所 使 用 的 空间 尺寸 


myBar.Set('chart.gutter',65); 


myBar.Draw(); 


// 


绘制 折线 图 ， 指 定数 据 


var myLine = new RGraph.Line('myCanvas',[1600,1200,1200,1600,1800,1200,1200,1600, 
1900,1100,1000,1600]); 


// 


指定 折线 与 图 例 中 的 颜色 
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myLine.Set('chart.colors', ['red', 'blue']); 
/指定 图 例文 字 
myLine.Set('chart.key', [瓶装 类 ',，' 饶 装 类 中); 
/指定 Y 轴 的 坐标 轴 文 字 
myLine.Set('chart.ylabels.specific',['3000'.'2500','2000','1500','1000','500']); 
/指定 线 宽 
myLine.Set('chart.linewidth', 3); 
/指定 不 绘制 网 格 
myLine.Set('chart.backeround.grid', false); 
/指定 标签 文字 的 绘制 空间 
myLine.Set('chart.gutter', 65); 
/绘制 折线 图 
myLine.Draw(); 


</script> 

</head> 

<body onload="window_onload()"> 

<canvas id="myCanvas" width="700" height="400"> 
[您 的 浏览 器 不 文 持 canvas 元 素 ] 

</canvas> 

</body> 

</html> 


执行 后 的 效果 如 图 13-10 所 示 。 


2012 年 青岛 啤酒 瓶装 类 与 唆 装 类 两 种 产品 的 销售 情况 


图 13-10 ”执行 效果 


13.11. Æ HMI 5 网 页 中 绘制 动态 折线 图 


本 实例 的 功能 是 , 在 HTML 5 网 页 中 绘制 动态 折线 图 ， 通过 Ajax 等 方法 从 后 全 取得 服务 
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HTML 5 天 发 从 入 门 到 精通 
器 端的 动态 数据 来 实时 更 新 折线 图 。 本 实例 设置 每 250 毫秒 产生 一 个 随机 数 的 方法 来 模拟 动 


态 数据 。 
实例 13-11 说 明 
源码 路 径 JG Ndaima M 3M 1.html 
功能 在 HIML 5 网 页 中 绘制 动态 折线 图 


实例 文件 11.html 的 实现 代码 如 下 。 
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<!DOCTYPE html> 

<head> 

<meta charset="UTF-8"> 
<title> 制 作 动态 折线 图 </title> 


«script src="RGraph.common.core.Js"></script> 


«script src-"RGraph.line.js"7«/script^ 
<script> 


function window onload() 


{ 
dl =[];// 存 放 上 部 折线 图 使 用 数据 的 数组 
d2 =[];// 存 放下 部 折线 图 使 用 数据 的 数组 
// 用 null 值 填充 数组 
for (var 1-0; i< 100; ++i) 
{ 
dl.push(null); 
d2.push(null); 
j 
/绘制 折线 图 
drawGraph(); 
j 
/设置 折线 图 属性 
function getGraph(id, d1, d2) 
{ 


var graph = new RGraph.Line(id, d1, d2);// 获 取 折 线 图 数据 

graph.Set('chart.gutter', 25);// 设 置 标 签 文 字 使 用 空间 

graph.Set('chart.title.xaxis', 时间 (毫秒 )7/ 设 置 水 平 坐标 轴 标 题 

graph.Set('chart.filled', true);// 使 用 填充 色 填 充 折 线 区 域 

graph.Set('chart.fillstyle', ['#dafl fa', #faa']);// 指 定 上 部 折线 区 域 与 下 部 折线 区 域 的 填充 色 


graph.Set('chart.colors', ['rgb(169, 222, 244)', red]);/ 指 定 上 部 折线 与 下 部 折线 的 颜色 
graph.Set('chart.linewidth', 3);// 指 定 线 宽 
graph.Set('chart.ymax', 20);// 指 定 垂直 坐标 轴 上 的 最 大 数值 
graph.Set('chart.xticks', 25);/ 指 定 水 平 坐标 轴 上 的 刻度 线 
return graph;// 返 回 设置 好 的 折线 图 
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/绘制 折线 图 
function drawGraph (e) 


/清除 之 前 绘制 的 折线 图 
RGraph.Clear(document.getElementById("myCanvas")); 


var graph = getGraph('myCanvas', d1, d2);// 获 取 设 置 好 属性 的 折线 图 
graph.Draw();// 绘 制 折线 图 


// 使 用 随机 数字 填充 折线 图 所 使 用 的 数据 数组 
dl.push(RGraph.random(5, 10)); 
d2.push(RGraph.random(5, 10)); 


/如 果 数 组 已 经 填 满 ， 则 移出 数组 中 最 前 面 的 数字 ,并 将 数组 中 每 个 数字 朝 前 移 位 
if (dl.length > 100) ( 

dl = RGraph.array_shift(d1); 

d2 = RGraph.array_shift(d2); 


j 
/设置 每 250 毫秒 更 新 折线 图 
setTimeout(drawGraph,250); 
j 
</script> 
</head> 
<body onload="window_onload()"> 
<canvas id="myCanvas" width="700" height="500"> 
[您 的 浏览 器 不 支持 canvas 元 素 ] 
</canvas> 
</body> 
</html> 


执行 后 的 效果 如 图 13-11 所 示 。 


20] 


时 间 (毫秒 ) 


图 13-11 执行 效果 
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HTML 5 天 发 从 入 门 到 精通 


本 实例 的 功能 是 , 在 HTML 5 网 页 ! 
司 的 销售 状况 。 本 实例 具备 工具 条 提示 功能 ， 当 
现 一 个 3D 效果 的 突出 显示 ， 并 且 在 该 饼 块 上 出 现 


绘制 一 个 饼 图 。j 


13.12. E HTML 5 网 页 中 绘制 一 个 饼 图 


通过 这 个 饼 图 演示 了 2012 年 啤 
鼠标 指针 移动 到 茶 个 饼 块 - 


个 工具 条 提示 


窒息 


H f o 


上 上 时， 此 饼 块 


s 
= 


H 


7 


A 
=i 


实例 13-12 说 明 
源码 路 径 光盘 \daima\13\12.html 
功能 1E HTML 5 网 页 中 绘制 一 个 饼 图 


实例 文件 12.html 的 


<!DOCTYPE html> 


<head> 


<meta charset="UTF-8"> 
<title> 制 作 饼 图 </title> 
«script src="RGraph.common.core.Js"></script> 


«script strc="RGraph.pie.js"></script> 


| 体 实现 代码 如 下 所 示 。 


«script src="RGraph.common.tooltips.js"></script> 


<script> 


function window onload() 


1 


IE 


饼 图 ， 获 取 饼 图 数据 


var pie-new RGraph.Pie('myCanvas',[12000,13000,14000,15000,30000,19000]); 


//2238l 


饼 图 标题 


pie.Set('chart.title', 2012 年 啤酒 公司 的 销售 状况 ); 


IE 


图 


标签 文字 


pie.Set('chart.labels', ['AA (12%) ','BB (13%) ','CC (14%) ','DD (15%) ', 
'EE (2996 


) VFF (17%) 'D; 


// 指 定 饼 


图 


分 隔 线 宽 


pie.Set('chart.linewidth', 5); 


// 指 定 饼 


图 


分 隔 线 颜色 


pie.Set('chart.strokestyle','white'); 


IHR XE T. 


/指定 当 


YE j 


条 提示 信息 的 出 现 效 果 为 淡 入 效果 


pie.Set('chart.tooltips.effect', 'fade"); 
鼠标 指针 在 饼 块 


pie.Set('chart.tooltips.event', 'onmousemove'); 


Ally 


上 移动 时 出 现 工 具 条 提示 信息 


El 


IHR XE T. 


条 提示 信息 的 文字 


pie.Set('chart.tooltips', [AA (1296) ,BB (13%) '/CC (1496) ''DD (15%) ', 
'EE (29%),FF (17%) ']y; 


/指定 工 


条 提示 信息 具有 3d 效果 


pie.Set('chart.highlight.style', '3d"); 
// 绘 制 饼 图 
pie.Draw(); 
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</script> 

</head> 

<body onload="window_onload()"> 

<canvas id="myCanvas" width="700" height="400"> 
[您 的 浏览 器 不 支持 canvas 元 素 ] 

</canvas> 

</body> 

</html> 


执行 后 的 效果 如 图 13-12 所 示 。 
2012 年 啤酒 公司 的 销售 状况 


EE (29%) 


FF (17%) 


DD (15%) 
AA (12%) 


CC (14%) 


CC (1496) BB (13%) 


图 13-12 ”执行 效果 


13.13 点 击 饼 块 后 呈现 白色 半 透 明 效果 


fr HTML 5 网 页 中 在 绘制 饼 图 时 ， 可 以 使 用 obj.getSegment 方法 使 用 户 知道 哪个 饼 块 被 
单 击 。 该 方法 会 返回 一 个 保存 如 下 信息 的 数组 。 

口 获得 被 单 击 饼 块 在 和 X 轴 上 的 坐标 点 。 

口 获得 被 单 击 饼 块 在 立轴 上 的 坐标 点 。 

口 获得 被 单 击 饼 块 的 绘制 半径 。 

口 获得 被 单 击 饼 块 的 起 始 绘制 角度 。 

口 获得 被 单 击 饼 块 的 结束 绘制 角度 。 


实例 13-13 说 明 
源码 路 径 JG Ndaima 3 M3.html 
功能 点 击 饼 块 后 呈现 白色 半 透 明 效 果 


当 本 实例 的 饼 块 被 单 击 时 ， 会 在 被 单 击 饼 块 之 上 重新 绘制 一 个 相同 尺寸 的 白色 羊 透 明 4 
块 ， 使 被 点 击 饼 块 呈现 一 种 白色 半 透 明 的 效果 。 实 例文 件 13.html 的 具体 实现 代码 如 下 所 示 。 
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<!DOCTYPE html> 
<head> 
«meta charset="UTF-8"> 

<title> 使 用 RGraph 插件 制作 人 饼 图 <ytitle> 
«script src="RGraph.common.core.Js"></script> 
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«script src-" RGraph.pie.js"7«/script 


«script src-" RGraph.common.tooltips.js" «/script 


«script 


function window onload() 


1 


var pie-new RGraph.Pie('myCanvas'[12000,13000,14000,15000,30000,19000]); 


// 绘 人 


pie.Set( 


剖 饼 图 标题 


// 绘 人 


剖 饼 图 图 例 


pie.Set('chart.key', ['AA (12%) ','BB (1 


'EE 


/指定 图 例 背景 色 


(2994) ''FF (17%) ']; 


pie.Set('chart.key.background', 'white'); 


// 指 定 饼 块 间 的 分 阳线 颜色 


B 


pie.Set('chart.linewidth', 5); 


// 绘 人 


BE 


pie.Draw(); 


/注册 控件 
RGraph.Register(pie); 
/指定 饼 图 被 点 击 时 的 函数 


pie.c 


1 


anvas.onclick — function (e) 


RGraph.FixEventObject(e);//? JU] SF 
RGraph.Redraw();// E 22 f d 


var canvas = etarget;// 获 取 绘 制 饼 图 
var context = canvas.getContext(2d);/ 


'chart.title', '2012 年 啤酒 公司 的 销售 状况 "); 


3%) ','CC (14%) ','DD (15%) ', 


的 canvas 元 素 
获取 绘制 饼 图 的 canvas 元 素 的 图 形 上 下 文 对 象 


var obj = canvas. object ;//jk 


取 饼 图 对 象 


var segment = obj.getSegment(ej;/ 获 取 被 点 击 的 饼 块 


if (segment) /如 果 存 在 被 点 击 的 饼 块 
{ 
context.fillStyle = 'rgba(255,255,2 
context.beginPath0;/ 开 始 创建 路 


/将 角度 转换 为 半径 
segment[3] /= 57.29; 
segment[4] /= 57.29; 


55,0.5)';// 指 定 白色 半 透 明 颜色 为 填充 色 


p^ 
T 


context.moveTo(segment[0], segment[1]);// 将 绘制 起 点 移动 到 被 点 击 的 饼 块 处 


/在 被 点 击 的 饼 块 上 再 绘制 相同 


尺寸 的 饼 块 


context.arc(segment[0], segment[1], segment[2], segment[3], segment[4], 0); 


context.stroke0;/ 绘 制 饼 块 边框 
context.fill();// 填 充 饼 块 


e.stopPropagation0;/ 阻 止 事件 传播 


} 
/指定 页 面 被 点 击 时 的 函数 
window.onclick = function (e) 


1 


RGraph.Redraw();/38 22 0f Fe] 
} 
</script> 
</head> 
<body onload="window_onload()"> 
«canvas id-"myCanvas" width="700" height="400"> 
[您 的 浏览 器 不 支持 canvas 元 素 ] 
</canvas> 
</body> 
</html> 


执行 后 的 效果 如 图 13-13 所 示 。 
2012 年 啤酒 公司 的 销售 状况 


图 13-13 ”执行 效果 


13.14 £ HTML 5 网 页 中 绘制 横向 柱状 图 


本 实例 的 功能 是 ， 在 HTML 5 网 页 中 绘制 一 个 横向 柱状 图 
2012 年 X 义 啤酒 瓶装 类 产品 的 销售 情况 。 


W AA (12%) 


EE (2996) 
E FF (17%) 


。 本 实例 的 横向 柱状 


第 13 章 统 这 固 实战 


s 


反映 了 
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实例 13-14 说 明 
源码 路 径 daima\13\14.html 
功能 在 HTML 5 网 页 中 绘制 横向 柱状 图 


I 


实例 文件 14.html 的 具体 实现 代码 如 下 所 示 。 


<!DOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<title> 绘 制 横向 柱状 图 </title> 

«script src="RGraph.common.core.js"></script> 


«script src="RGraph.hbar.js"></script> 
<script> 
function window onload() 
{ 
/绘制 横向 柱状 图 ， 指 定数 据 
myGraph = new RGraph.HBar('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100,2500,2700, 


1400,2600]); 


/指定 统计 图 标题 

myGraph.Set('chart.title''2012 年 久久 啤酒 瓶装 类 产品 的 销售 情况 〈 单 位 : 万 瓶 ) ); 
/指定 和 轴 标 题 

myGraph.Set('chart.title.xaxis', JA 5); 

/指定 立轴 标题 

myGraph.Set('chart.title.yaxis',' 月份 ); 

// 指 定 Y 轴 的 坐标 轴 文 字 

myGraph.Set('chart.labels' [1 月 ,2 月 ,3 月 ,4 H'/5 H''6 月 ,7 H's 月 ','9 月 "10 H', 
11H32 By 
/指定 在 坐标 轴 右 端 绘制 说 明 销 售 数量 的 文字 
myGraph.Set('chart.labels.above', true); 
/指定 网 格 自 动 与 坐标 轴 单 位 对 齐 
myGraph.Set('chart.background.grid.autofit', true); 


TT 


EN 


myGraph.Set('chart.background.grid.autofit.align', true); 
/指定 标签 文字 所 使 用 的 空间 尺寸 
myGraph.Set('chart.gutter',45); 

/绘制 横向 柱状 图 
myGraph.Draw(); 


} 

</script> 

</head> 

<body onload="window_onload()"> 

<canvas id="myCanvas" width="700" height="400"> 
[您 的 浏览 器 不 支持 canvas 元 素 ] 

</canvas> 

</body> 

</html> 
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执行 后 的 效果 如 图 13-14 所 示 。 
2012 年 青岛 啤酒 瓶装 类 产品 的 销售 情况 (单位 万 壮 》 
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图 13-14 ”执行 效果 


13.15 在 网 页 中 绘制 分 组 横向 柱状 图 


本 实例 的 功能 是 ， 在 HTML 5 网 页 中 绘制 一 个 分 组 横向 柱状 图 。 本 实例 的 分 组 横向 柱状 
图 反映 了 2012 年 义 啤酒 瓶装 类 和 饶 装 类 产品 的 销售 情况 。 


实例 13-15 说 ag 
源码 路 径 daima\13\15.html 
功能 TE HTML 5 网 页 中 绘制 分 组 横向 柱状 图 


实例 文件 15.html 的 实现 代码 如 下 。 


<head> 

<meta charset="UTF-8"> 

<title> 使 用 RGraph 插件 制作 横向 柱状 图 </title> 
«script src="RGraph.common.core.js"></script> 
«script src="RGraph.Hbar.js"></script> 

<script> 

function window onload() 


/绘制 分 组 横向 柱状 图 ， 指 定数 据 

myGraph = new RGraph.HBar('myCanvas',[[1200,1600],[1300,1200],[1400,1200], 
[1500,1600],[3000,1800],[1900,1200],[2000,1600],[2100,1900], 
[2500,1100],[2700,1000],[1400,1600],[2600,1200]]; 

/指定 统计 图 标题 

myGraph.Set('chart.title','2012 年 X X 啤酒 瓶装 类 和 把 装 类 产品 的 销售 情况 (单位 : 万 瓶 ) ); 

/指定 入 轴 标 题 

myGraph.Set('chart.title.xaxis',' 数 量 '"); 

// 指 定 Y 轴 标 题 
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myGraph.Set('chart.title.yaxis',' H 47"); 
/指定 柱状 图 图 例 被 绘制 在 图 例 区 域 中 
myGraph.Set('chart.key.position', 'eraph!); 
/指定 图 例文 字 
myGraph.Set('chart.key', [瓶装 类 ',' 饶 装 类 ]); 
/指定 柱子 颜色 
myGraph.Set('chart.colors', ['blue', 'green']); 
/指定 立轴 的 坐标 轴 文 字 
myGraph.Set('chart.labels' [1 H'/2 月 ,3 月 ,4 H'/5s 月 "6 月 ,7 月 ,8 Ho 月 10 H', 
11 A2 MY 
/指定 在 坐标 轴 右 端 绘制 说 明 销售 数量 的 文字 
myGraph.Set('chart.labels.above',true); 
// 指 定 网 格 自动 与 坐标 轴 单 位 对 齐 
myGraph.Set('chart.background.grid.autofit', true); 
myGraph.Set('chart.background.grid.autofit.align', true); 
/指定 标签 文字 所 使 用 的 空间 尺寸 
myGraph.Set('chart.gutter',45); 
/绘制 分 组 横向 柱状 图 
myGraph.Draw(); 


j 

</script> 

</head> 

<body onload="window_onload()"> 

«canvas id-"myCanvas" width="900" height="400"> 
[您 的 浏览 器 不 支持 canvas 元 素 ] 

</canvas> 

</body> 

</html> 


执行 后 的 效果 如 图 13-15 所 示 。 
2012 年 青岛 啤酒 瓶装 类 和 锥 装 类 产品 的 销售 情况 〈 单 位 : JR) 
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图 13-15 执行 效果 
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在 HTML 5 网 页 应 用 中 ， 特 效 永 远 是 设计 师 们 喜欢 挑战 的 工作 。 因 为 精美 的 特效 可 以 吸 
引 众 多 用 户 的 眼球 ， 提 高 网 页 的 访问 量 。 本 章 介绍 联 合 使 用 HTML 5. CSS 和 JavaScript 技术 
实现 网 页 特效 的 知识 ， 并 通过 具体 实例 来 演示 具体 实现 流程 。 


141 实现 星 级 评论 功能 


jQuery 是 一 个 非常 著名 的 JavaScript 开源 框架 , 能 够 实现 超 炫 的 特效 界面 。 jQuery 是 一 个 
开源 的 特效 组 件 , 读者 可 以 登录 http://www.codefans.net 下 载 开源 框架 代码 。 本 实例 的 功能 是 ， 


调用 了 jQuery 源码 ， 实 现 了 星 级 评论 功能 。 
实例 14-1 说 — HJ 
源码 路 径 daimaM 4M .html 
功能 使 用 jQuery 实现 星 级 评论 功能 


实例 文件 1.html 的 实现 代码 如 下 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>jquery 星 级 评论 打分 组 件 </title> 

«script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.Js"></script> 

<style> 

html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,img,ins,del,dl,dt,dd,ol,ul,li,fields 
et,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {margin:0;padding:0;border:0} 

body,button,input,select,textarea{font:12px/1.6 Arial,Tahoma,simsun;color:#333} 


button,input,select,textarea {margin:0;outline:0} 

textarea{resize:none} 

h1,h2,h3,h4,h5,h6 {font-size:100%} 
address,cite,dfn,em,var,i{font-style:normal} 
blockquote:before,blockquote:after,q:before,q:after ( content:" 

table (border-spacing:0;border-collapse:collapse } 

li {list-style:none} 

sectionyarticle,aside,header,footer,nav, dialog, figure ( display:block]/*html5*/ 


pre (word-wrap:break-word;font-family:Arial;zoom:1;white-space:pre-wrap 
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/*public*/ 
a(text-decoration:none;color:£36c] 
a:hover(text-decoration:underline;color:£ZFF7000j 
.clearíclear:both;height:0;overflow:hidden] 
-clearfix:after (content:" ";display:block;height:0;clear:both;visibility:hidden ; 
.clearfix {zoom: 1} 
label input{vertical-align:-2px;*vertical-align:0} 
.fl {float:left} 
.fr{float:right} 
.page all{width:980px;margin:0 auto} 
.gray3 {color:#333}/*text*/ 
.gray6 {color:#666} 
.gray7 {color:#7e7e7e} 
.gray9 {color:#999} 
.Orange,.sublink .orangeícolor:#ff7000; 
.green {color:#65C202} 
.sublink a{color:#3C5891} 
.m5 {margin:Spx}/*margin*/ 
.mt5 {margin-top:Spx} 
.mr5 {margin-right: Spx} 
mb5 {margin-bottom:Spx} 
.ml5 {margin-left:Spx} 
.m10{margin:10px} 
.mt10{margin-top: 10px} 
mr10 (margin-right: 10px} 
.mb10 (margin-bottom:10pxj 
ml10(margin-left: 10px} 
.Ih24 (Iine-height:24px) 
</style> 
<script> 
var pRate = function(box,callBack) ( 
this.Index = null; 
var B = $("#"+box), 
rate — B.children("i"), 
w = rate.width(), 
n = rate.length, 
me = this; 
for(var i=0;i<n;rr+)í 


rate.eq(1).css(1 
"width'zw* (1-1), 
'z-index':n-i 

J 


j 


rate.hover(function() ( 
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var S = B.children("i.select"); 
$(this).addClass("hover").siblings().removeClass("hover"); 
if($(this).index()>S.index()){ 
S.addClass("hover"); 
} 
},function(){ 
rate.removeClass("hover"); 
D) 
rate.click(function() í 
rate.removeClass("select hover"); 
S$(this).addClass("select"); 
me.Index = $(this).index() + 1; 
if(callBack) (callBack();) 
D 
} 
</script> 
«style type="text/css"> 
h1 {font:26px/3 'microsoft yahei','simhei';color:#000;text-indent:2em;text-shadow: 1 px 1px 2px #ccc* 
.p_rate{height:14px;position:relative;width:80px;overflow:hidden;display:inline-block;background:url(ht 
tp://www.codefans.net/jscss/demoimg/201 112/rate.png) repeat-x;margin:40px 100px} 
.p rate 
1Íposition:absolute;top:0;left:0;cursor:pointer;height: 1 4px;width: 1 6px;background:url(http://www. 
www.codefans.net/jscss/demoimg/201 1 12/rate.png) repeat-x 0 -500px } 
.p. rate .select (background-position:0 -32px} 
.p. rate .hover(background-position:0 -16px ) 
</style> 
</head> 
<body> 
<h1>jQuery 星 级 评论 打分 组 件 </h1> 
«span class-"p rate" 1d="p rate" 
<i title-"1 4) "»«/i» 
<i title="2 4)" »«/i» 
<i title-"3 4)" »«/i» 
<i title-"4 分 "></ 户 
<i title="5 4)" »«/i» 
</span> 
<script> 
var Rate = new pRate("p_rate",function(){ 
alert(Rate.Index+' 分 ) 
J) 
</script> 
</body> 


</html> 


执行 后 的 效果 如 图 14-1 所 示 。 
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jQuery 星 级 评论 打分 组 件 


图 14-1 执行 效果 
单 击 图 14-1 中 的 某 个 星 后 ， 会 弹出 一 个 提示 对 话 框 ， 如 图 14-2 所 示 。 


IHI 


图 14-2 ”提示 对 话机 


14.2 ”实现 无 刷新 验证 


本 实例 的 功能 是 ， 使 用 jQuery 框架 实现 无 刷新 验证 功能 。 本 实例 调用 了 开源 框架 jQuery 
M HTML 5 中 的 表单 进行 交互 ， 最 终 实 现 了 无 刷新 验证 特效 。 


实例 14-2 说 BJ 
源码 路 径 daima\14\2.html 
功能 在 网 页 中 实现 无 刷新 验证 


实例 文件 2.html 的 实现 代码 如 下 。 


<IDOCTYPE HTML> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 表 单 验证 </title> 

<style> 

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} 
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form div í margin:5px 0;} 
int label í float:left; width:100px; text-align:right;} 
.int input í padding: 1px 1px; border:1px solid #ccc;height:16px;; 
.sub í padding-left: 100px; } 
.Sub input í margin-right: 10px; } 
-formtips (width: 200px;margin:2px;padding:2px;} 
.onError( 
background;zFFEOEO9  url(http://www.codefans.net/Jscss/demoimg/201111/reg3.gif) no-repeat 0 


center; 
padding-left:25px; 
j 
.onSuccess í 
background:#E9FBEB  url(http://www.codefans.net/jscss/demoimg/201111/reg4.gif) no-repeat 0 
center; 
padding-left:25px; 
j 
.high{ 
color:red; 
} 
</style> 


<l-- 引入 jQuery --> 
«script src-"http://www.codefans.net/ajaxjs/jquery1.3.2.js" type="text/javascript"></script><script type= 
"text/javascript">//<![CDATA[S$(function() í 
// 如 果 是 必 填 的 ， 则 加 红星 标识 . 
$("form :input.required").each(function() í 
var $required = $("<strong class='high'> *</strong>"); /创建 元 素 
$(this).parent().append($required); /然后 将 它 追 加 到 文档 
J) 
/文本 框 失去 焦点 后 
$('form :input').blur(function() ( 
var $parent = $(this).parent(); 


n 


H 


S$parent.find(" .formtips").remove(); 
/验证 用 户 名 
if( $(this).is('#username') ){ 
这 this.value=="" || this.value.length < 6 )í 
var errorMsg = ' 请 输入 至 少 6 位 的 用 户 名 .'; 
$parent.append('<span class-"formtips onError">'+errorMsg+'</span>'); 
yelse { 
var okMsg = ' 输 入 正确 .'; 
$parent.append('<span class="formtips onSuccess">'+okMsg+'</ span>"); 


} 
// 验 证 邮件 
if( $(this).is('#email') ){ 
if( this.value—"" || ( this.value!="" && !/.+@..[a-zA-Z] {2,4} $/.test(this. value) ) ){ 
var errorMsg =' 请 输入 正确 的 E-Mail 地 址 .'; 
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$parent.append('<span class="formtips onError">'+errorMsg+'</span>'); 
yelse { 
var okMsg = ' 输 入 正确 .'; 
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); 


j 
P. keyup(function() í 
S(this).triggerHandler("blur"); 
3).focus(function() í 
S(this).triggerHandler("blur"); 
});//end blur 


/提交 ， 最 终 验 证 。 
$('#send").click(function() í 
$("form :input.required").trigger('blur); 
var numError = $('form .onError').length; 


if(numError)( 
return false; 
} 
alert(" 注 册 成 功 ,密码 已 发 到 你 的 邮箱 ,请 查收 ."); 
J); 
// 重 置 


$('#res').click(function(O){ 
$(".formtips").remove(); 
D 
)) 
//]]> 
</script> 
</head> 
<body> 
«form method="post" action=""> 
<div class="int"> 
<label for="username"> 用 户 名 :</label> 
«input type="text" id="username" class-"required" /> 
</div> 
«div class="int"> 
<label for="email"> 邮 箱 :</label> 
<input type="text" id="email" class="required" /> 
</div> 
«div class="int"> 
<label for="personinfo"> 个 人 资料 :</label> 
<input type="text" id="personinfo" /> 
</div> 


«div class="sub"> 
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«input type="submit" value=" 提 交 " id="send"/><input type="reset" id="res"/> 
</div> 
</form> 
</body> 
</html> 


执行 后 的 效果 如 图 14-3 所 示 。 


用 户 名 * Q 请 输入 至 少 6 位 的 用 户 名 
邮箱 * © 请 输入 正确 的 E-Mail 地 址 
仆人 资料 


-提交 | z| 


图 14-3 执行 效果 


14.3 使 用 jQuery 实现 的 表单 特效 


本 实例 的 功能 是 , 使 用 jQuery 实现 一 个 精美 的 表单 特效 。 这 是 一 款 基 于 jQuery 的 漂亮 世 
表单 效果 ,将 表单 的 输入 框 换 成 了 横 线 ， 加 入 了 背景 ， 引入 了 jQuery 插件 ， 样 式 上 特别 漂亮 ， 
是 一 个 值得 借鉴 的 jQuery 表单 美化 实例 ， 而 且 本 表单 在 布局 上 完全 是 基于 纯 CSS 标签 来 实 
现 的 ， 使 用 了 CSS 中 的 fieldset 来 制作 表单 ， 兼 容 性 好 。 


实例 14-3 说 BJ 
源码 路 径 daima\14\3.html 
功能 在 网 页 中 使 用 jQquery 实现 的 表单 特效 


实例 文件 3.html 的 实现 代码 如 下 。 


«IDOCTYPE HTML> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>noteform</title> 
«script src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script> 
<script> 
$(function() í 
$("div").click(function() í 

$(this).addClass("select"); 

» 
J) 
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</script> 


<style> 

al 

[*45W& CSS 代码 */ 
-> 

</style> 

</head> 

<body> 


<div class="exlist"> 


<div class="exlist_title"><img src-"paper-clip.png" /></div> 
<div id="title"><legend> 快 递 运单 信息 </legend></div> 
<form method="post" action=""> 

<fieldset> 

<legend> 收 件 信 息 </legend> 
«div class="row"> 
<label>1. 收 货 人 :</label> 
«input style-"width: 100px" class="txt" type="text" /> 
<label>2. 目的 地 :</label> 
<select> 
<option> 北 京 </option> 
<option> 上 海 </option> 
<option> 武 汉 </option> 
<option> 乌 鲁 木 齐 </option> 
</select> 
</div> 
<div class="row"> 
<label>3. 联系 电话 :</label><input class="txt" type="text" /> 
</div> 
<div class="row"> 
<label>4. 详细 地 址 :</label><input class-"txt" style="width:400px" type="text" /> 
</div> 

</fieldset> 

<fieldset> 

<legend> 发 件 信息 </legend> 
<div class="row"> 
<label>1. 发 货 人 :</label> 
<input style="width: 100px" class="txt" type="text" /> 
<label>2. 始 发 地 :</label> 
<select> 
<option> 北 京 </option> 
<option> 上 海 </option> 
<option> 武 汉 </option> 
<option> 乌 鲁 木 齐 </option> 
</select> 
</div> 
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<div class="row"> 
<label>3. 联系 电话 :</label><input class="txt" type="text" /> 
</div> 
«div class="row"> 
<label>4. 详细 地 址 :</label><input class="txt" style="width:400px" type= "text" /> 
</div> 
</fieldset> 
<fieldset> 
<legend> 货 物 信息 </legend> 
<div class="row"> 
<label>1. 数量 :</label><input class="txt" style="width:30px" maxlength="2" 


type-"text" /> 


<label> (1-99 件 ) </label> 
<label>2. 体积 :</label><input class="txt" style="width:30px" maxlength="3" 


type="text" /> 


lizzli 
pa 
Im 


<label>3. 车 星 :</label><input class-"txt" style-"width:30px" maxlength-"3" 


type-"text" /> 


<label> (Kg) </label> 

</div> 

<div class="row"> 

<label>4. 运输 方式 :</label> 

<select> 

<option> 航 运 </option> 

<option> 火 车 </option> 

<option> 汽 车 </option> 

<option> 轮 船 </option> 

</select> 

</div> 

<div class="row"> 
<label>5. 付款 方式 :</label> 

<p> 
<label><input type="radio" name="pay" value=" 单 选 "> 现 金 付 款 </label> 
<label><input type="radio" name-"pay" value=" 单 选 "> 收 件 人 付款 </label> 
<label><input type="radio" name="pay" value=" 单 选 "> 第 三 方 付款 </label> 

</p> 

</div> 
</fieldset> 
</form> 


</div> 
</body> 


</html> 
执行 后 的 效果 如 图 14-4 所 示 。 
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图 14-4 执行 效果 


14.4. 在 网 页 中 动态 操作 表格 


本 实例 的 功能 是 ， 联 合 使 用 HTML 5. CSS 和 JavaScript 实现 动态 操作 表格 的 功能 ， 分 别 
实现 添加 /删除 行 和 列 以 及 单元 格 。 并 且 可 以 指定 从 第 几 列 到 第 几 列 合并 ， 其 中 的 核心 功能 是 
通过 JavaScript 实现 的 。 


实例 14-4 说 — HJ 
源码 路 径 daimaM4M.html 
功能 在 网 页 中 动态 操作 表格 


实例 文件 4.html 的 实现 代码 如 下 。 


<!DOCTYPE HTML> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>js 动态 操作 表格 </title> 
«script language="javascript"> 
function init() í 
_table=document.getElementById("table"); 
_table.border="1px"; 
_table.width="800px"; 
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for(var i=1;i<6;it+){ 

var row=document.createElement("tr"); 

row.id-i; 

for(var j=1;j<6;j++){ 
var cell=document.createElement("td"); 
cell.id=i+"/"+j; 
cell.appendChild(document.createTextNode(" 第 "+cell.id+" 列 ")); 
row.appendChild(cell); 


j 
document.getElementById("newbody").appendChild(row); 


function rebulid() í 
var beginRow-document.getElementBylId("beginRow").value;/*7T 451] */ 
var endRow-document.getElementBylId("endRow").value;/* 4 R fT */ 
var beginCol-document.getElementBylId("beginCol").value;/*7T 45 7i] */ 
var endCol-document.getElementBylId("endCol").value;/*Z& 9& 7i] */ 
var tempCol=beginRow+"/"+beginCol;/* 定 位 要 改变 属性 的 列 */ 
alert(tempCol); 
var td=document.getElementById(tempCol); 


for(var x=beginRow;x<=endRow;x++)í 
for(var i=beginCol;i<=endCol;i++){ 
if(x==beginRow){ 
document.getElementById("table").rows[x].deleteCell(i+1); 
} 
else{ 
document.getElementByld("table").rows[x ].deleteCell(1); 


j 
td.rowSpan-(endRow-beginRow)--1; 
j 
RDT, 87H appendChild 方法 */ 
function addRow()( 
var length-document.getElementByld("table").rows.length; 
/*document.getElementById("newbody").insertRow(length); 
document.getElementBylId(length--1).setAttribute("id",length--2);*/ 
var tr-document.createElement("tr"); 
tr.id=length+1; 
var td=document.createElement("td"); 
for(i=1;i<4;i++){ 
td.id=tr.id+"/"+i; 
td.appendChild(document.create TextNode(" 5" --td.id--" 70"); 
tr.appendChild(td); 
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} 
document. getElementById("newbody").appendChild(tr); 
j 
function addRow withInsert() í 
var row-document.getElementByld("table").insertRow(document.getElementById("table").rows. 
length); 


var rowCount-document.getElementByld("table").rows.length; 


var countCell-document.getElementByld("table").rows.item(0).cells.length; 
for(var i=0;i<countCell;i++){ 
var cell=row.insertCell(i); 


cell.innerHTML="#r"+(rowCount)+"/"+(i+1)+"#IJ"; 
cell.id=(rowCount)+"/"+(i+1); 


j 
[*IERTI. XH deleteRow(row Index)*/ 


function removeRow()1 
document.getElementById("newbody").deleteRow(document.getElementById(document.getElementByI 
d("table").rows.length).rowIndex); 
} 
FDZ, KH insertCell( 列 位 置 ) 方 法 */ 
function addCell()1 
/*document.getElementBylId("table").rows.item(0).cells.length 
用 来 获得 表格 的 列 数 
e 
for(var 1-0;i«document.getElementBylId("table").rows.length;14—-) í 
var cell-document.getElementBy d("table").rows[i |.insertCell(2); 
cell.innerHTML-" 4f "(14-1 )2-"/"-3--" jJ": 


j 
FUERTE, KH deleteCell( 列 位 置 ) 的 方法 */ 
function removeCell(){ 
for(var 1=0;i<document.getElementBylId("table").rows.length;i++){ 
document.getElementByld("table").rows[i].deleteCell(0); 


} 
</script> 
</head> 


<body onLoad="init();"> 
«table id="table" align="center"> 
<tbody id="newbody"></tbody> 
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</table> 
<div> 
«table width="800px" border-"1 px" align="center"> 
<tr><td  align-"center'^«input type="button"  id-'addRow" | name-"addRow"  onClick- 
"addRow();" value=" 添 加 行 "></td><td align="center"><input type="button" id-"delRow" name-"delRow" onClic 
k-"removeRow();" value=" 删 除 行 "></td></tr> 
<tr><td align="center"><input type="button" id-"delCell' ^name-"delCell" onClick= 
"removeCell();" value=" 删 除 列 "></td><td align="center"><input type="button" id="addCell" name="addCell" 
onClick=" addCell();" value=" 添 加 列 "/></td></tr> 
<tr><td align="center" colspan="2"><input type="button" id-"addRows" name="addRows" 
onClick="addRow_withInsert();" value=" 添 加 行 "/></td></tr> 
</table> 
</div> 
<div> 
«table width-"800px" border="1px" align="center"> 
<tr><td> 从 第 <input type="text" id-"beginRow" name-"beginRow" value=""/> fT $i] 
<input type="text" name="endRow" id="endRow" value=""/> 行 </td><td rowspan-"2" id="test"><input 
type="button" name-"hebing" id="hebing" value=" 合 并 " onClick="rebulid0;"/></td></tr> 
<tr><td> 从 第 <input type="text" name-"beginCol" id="beginCol" value=""/> Zi] l| «input 
type="text" name="endCol" id-"endCol" value=""/> 列 </td></tr> 


</table> 
</div> 
</body> 
</html> 
执行 后 的 效果 如 图 14-5 所 示 。 
第 171 列 第 1/2 列 第 173 列 第 174 列 第 175 列 
第 271 列 第 272 列 第 273 列 第 274 列 第 275 列 
33/17 第 372 列 第 3/3 列 第 374 列 第 375 列 
第 471 列 第 472 列 第 473 列 第 474 列 第 475 列 
第 571 列 第 572 列 第 573 列 第 574 列 第 575 列 
_ 肖 加 行 | MERIT 
添加 行 | 

从 第 | 行 到 行 — 
从 第 列 到 — — 7 = 


图 14-5 执行 效果 


145 ”在 文本 框 中 实现 层 效果 


本 实例 的 功能 是 ， 在 文本 框 中 触发 弹出 一 个 层 界面 效果 。 这 是 一 个 在 各 大 论坛 中 曾经 讨 
论 的 问题 ， 在 QQ 邮箱 和 Discuz 论坛 中 有 类 似 的 效果 。 当 鼠标 单 击 文本 框 时 ， 会 弹出 一 个 包 
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含 文字 、 图 片 、 表 单 无 素 的 div 层 ， 里 面 的 元 素 都 可 以 进行 操作 ， 选 中 的 值 会 自动 添加 到 文 
本 框 内 。 


实例 14-5 说 HJ 
源码 路 径 daimaN 14 5.html 
功能 在 文本 框 中 弹出 层 效 果 


实例 文件 5.html 的 实现 代码 如 下 。 


<!DOCTYPE HTML> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 文 本 框 弹 出 内 容 框 并 取 值 </title> 


javascript" type="text/javascript"> 


<Script language 
function moveselect(obj,target,all) ( 
if (lall) all-0 
if (obj!-"[object]") obj-eval("document.all."--obj) 
target-eval("document.all."--target) 
if (all==0) 
{ 
while (obj.selectedIndex>-1){ 
mot=obj.options[obj.selectedIndex |.text 
Imov=obj.options[obj.selectedIndex].value 
obj.remove(obj.selectedIndex) 
var newoption=document.createElement("OPTION"); 
newoption.text=mot 
newoption.value=mov 
target.add(newoption) 
j 
j 
else 
{ 
for (i=0;i<obj.length;i++) 
{ 
mot=obj.options[i].text 
mov=obj.options[i].value 
var newoption=document.createElement("OPTION"); 
newoption.text=mot 
newoption.value=mov 
target.add(newoption) 
} 
obj.options.length=0 
j 


j 
function dakai() í 


document.getElementByld('light").style.display-'block'; 
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document.getElementByld('fade').style.display='block' 

j 

function guanbi() í 

var yuanGong-document.getElementBylId("yuanGong") 

yuanGong.value=""// 如 果 不 加 这 句 ， 则 每 次 选择 的 结果 追加 

var huoQu-document.getElementBylId("D2") 

for(var k-0;k«huoQu.length;k-—) 

yuanGong.value-yuanGong.value + huoQu.options[k].value + " WM/ 这 里 的 " "中 间 为 空格 ， 为 字符 间 的 
分 隔 符 ， 你 可 以 改 成 别 的 

document.getElementByld('light').style.display='none'; 


document.getElementById(fade).style.display='mone' 

} 

</script> 

<style> 

.black overlay {display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 
100%;background-color:#FFFFFF;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);} 

.White content (display: none;position: absolute;top: 25%;left: 25%;width: 50%;height: 50%;padding: 
l6px;border: 16px solid orange; margin:-32px; background-color: white;z-index:1002;overflow: auto;} 

</style> 

</head> 

<body> 

<input type="text" id="yuanGong" onclick="dakai()" size="50"> 

<div id="light" class="white_content"> 

<table border="1" width="350" id="table4" bordercolor="#CCCCCC" bordercolordark="#CCCCCC" 
bordercolorlight="#FFFFFF" cellpadding="3" cellspacing="0"> 

<tr> 
<td width="150" height="200" align="center" valign="middle"> 
该 部 门 员工 
«select size-"12" name="D1" ondblclick-"moveselect(this,D2"" multiple: 

style-"width:140px"7 


multiple" 


«option value=" n T. 1"> RT. 1</option> 


«option value=" n T. 2"> fà T. 2</option> 


«option value=" n T. 3"> 员 工 3</option> 
</select> 
</td> 
<td width="50" height="200" align="center" valign="middle"> 
<input type="button" value="<<" name="B3" onclick="moveselect(D2','D1',1)" /><br /> 
<input type="button" value="<" name="B5" onclick="moveselect('D2','D1')" /><br /> 
<input type="button" value=">" name="B6" onclick-"moveselect('D1',D2"" /><br /> 
<input type="button" value=">>" name="B4" onclick="moveselect('D1','D2',1)" /><br /> 
</td> 
<td width="150" height="200" align="center" valign="middle"> 
未 划分 部 门 员工 
<select size="12" name="D2" id="D2" ondblclick="moveselect(this,'D1')" 
multiple="multiple" style="width:140px"> 
«option value=" R T. 4"> RT 4</option> 
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«option value=" n T. 5"> 员 工 5</option> 
</select> 
</td> 
</tr> 
</table> 
<a href = "javascript:void(0)" onclick = "guanbi()"> 确 定 </a><BR><BR> 
</div> 
<div id="fade" class="black_overlay"></div> 
</body> 
</html> 


执行 后 的 效果 如 图 14-6 所 示 。 


部 门 员工 


图 14-6 执行 效果 


14.6 ”实现 五 彩 连 珠 网 页 特效 


本 实例 的 功能 是 ， 在 网 页 中 实现 五 彩 连珠 特效 。 五 彩 连 珠 是 一 款 经 典 的 小 游戏 ， 大 小 


uh 


73.0 KB (74,752 字 节 )， 占 用 空间 80.0 KB (81,920 字 节 )， 是 一 款 
小 的 游戏 。 


AI 


Eas f Xd HE uk 


实例 14-6 说 明 
源码 路 径 daimaM 46.html 
功能 TE HTML 5 网 页 中 实现 五 彩 连珠 网 页 特效 


实例 文件 6.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
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<title>HTML Javascript 五 彩 连珠 -源码 Game</title> 

</head> 

<body> 
«canvas id="canvas" height="400" width="600" style="background: #333;"></canvas> 
«script type="text/javascript"> 


var game = í 
canvas: document.getElementById("canvas"), 
ctx: document.getElementBylId("canvas").getContext("2d"), 
cellCount: 9, 
cell Width: 30, 
lineCount: 5, 
mode: 7, 
actions: {}, 
play: function (name, action, interval) í 
var me = this; 
this.actions[name] = setInterval(function () í 
action(); 
me.draw(); 
}, interval || 50); 
J. 
stop: function (name) í 
clearInterval(this.actions[name]); 
this.draw(); 
J. 
colors: ["red", "#039518", "#ff00dc", "#ff6a00", "gray", "#0094ff", "#d2ce00"], 
start: function () í 
this.map.init(); 
this.ready init(); 
this.draw(); 
this.canvas.onclick = this.onclick; 
h 
over: function () í 
alert(""GAME OVER"); 
this.onclick = function () í 
return false; 
h 
J. 
draw: function () í 
this.ctx.clearRect(0, 0, 400, 600); 
this.ctx.save(); 
this.map.draw(); 
this.ready.draw(); 
this.score.draw(); 
this.ctx.restore(); 
J. 


clicked: null, 
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isMoving: function () { 
return this.ready.isMoving || this.map.isMoving; 
h 
onclick: function (e) í 
if (game.isMoving()) í 
return; 
j 
var px = (e.offsetX || (e.clientX - game.canvas.offsetLeft)) - game.map.startX; 
var py = (e.offsetY || (e.clientY - game.canvas.offsetTop)) - game.map.startY ; 
if (px < 0 || py < 0 || px > game.map.width || py > game.map.height) í 
return; 
j 
var x = parseInt(px / game.cell Width); 
var y = parselInt(py / game.cell Width); 


var bubble — game.map.getBubble(x, y); 
if (bubble.color) í 
if (this.clicked) í 
/同一 个 泡 不 做 反映 
if (this.clicked.x == x && this.clicked.y == y) í 


return; 
} 
this.clicked.stop(); 
j 
this.clicked — bubble; 
bubble.play(); 
} 
else { 
if (this.clicked) { 
this.clicked.stop(); 
/移动 clicked 
game.map.movec(this.clicked, bubble); 
j 
} 


//console.log("x:" + x +" y:" + y); 
Je 
getRandom: function (max) í 
return parseInt(Math.random() * 1000000 % (max)); 
jc 
Dr 


game.score — ( 
basic: 0, 
operate: 0, 
star1: 0, 
star2: 0, 
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boom: 0, 
draw: function () í 
var startX = game.cellWidth * 10 + game.map.startX; 
var startY = game.map.startY; 
var ctx = game.ctx; 
ctx.save(); 
ctx.translate(startX, startY); 
ctx.clearRect(0, 0, 150, 400); 
ctx.strokeStyle = "#456"; 
//ctx.strokeRect(0, 0, 150, 200); 
ctx.font = "24px 微软 雅 黑 "; 
ctx.fillStyle = "#fefefe"; 
ctx.fillText("score:" + (this.basic * 5 + this.starl * 8 + this.star2 * 10 + this.boom * 


20), 0, 30); 


ctx.stroke(); 
ctx.restore(); 
Je 
addScore: function (length) í 
switch (length) í 
case 5: 
this.basic++; 
break; 
case 6: 
this.star1++; 
break; 
case 7: 
this.star2++; 
break; 
default: 
this.boom++; 
break; 
j 
this.draw(); 
console.log(this.score); 


j; 


game.ready = í 
startX: 40.5, 
startY: 20.5, 
width: game.cellWidth * 3, 
height: game.cellWidth, 
bubbles: [ |, 
init: function () í 

this.genrate(); 
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var me = this; 
me.flyin(); 
上 
genrate: function () í 
for (vari= 0; i < 3; i++) í 
var color = game.colors[game.getRandom(game.mode)]; 
this.bubbles.push(new Bubble(i, 0, color)); 
j 
//console.log(this.bubbles); 
I? 
draw: function () í 
var ctx — game.ctx; 
ctx.save(); 
ctx.translate(this.startX, this.startY); 
ctx.beginPath(); 
ctx.strokeStyle = "#555"; 
ctx.strokeRect(0, 0, this.width, this.height); 
ctx.stroke(); 
/绘制 准备 的 泡 
this.bubbles.forEach(function (bubble) í 
bubble.draw(); 
J); 


ctx.restore(); 


J 
isMoving: false, 
flyin: function () í 
var emptys — game.map.getEmpty Bubbles(); 
if (emptys.length < 3) í 
// 游 戏 结束 
game.over(); 
return; 
} 
var me = this; 
var status = [0, 0, 0]; 
game.play("flyin", function () í 
if (status[0] && status[1] && status[2]) í 
game.stop("flyin"); 
me.isMoving = false; 
status — [0, 0, 0]; 
me.bubbles = [ |; 
me.genrate(); 
return; 
} 
me.isMoving = true; 
for (var i = 0; i < me.bubbles.length; i++) í 
if (status[1]) í 
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}, 10); 
} 
} 
game.map = { 
startX: 40.5, 
startY: 60.5, 
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continue; 
} 
var target = emptys[i]; 
var x2 = target.px + game.map.startX - me.startX; 
var y2 = target.py + game.map.startY - me.startY; 


var current = me.bubbles[i]; 


var step = 2; 
if (current.px < x2) í 


current.py = ((y2 - current.py) / (x2 - current.px)) * step + current.py; 


current.px += step; 
If (current.px > x2) í 
current.px — x2; 


j 


else if (current.px > x2) í 


current.py = ((y2 - current.py) / (current.px - x2)) * step  current.py; 


current.px -= step; 
if (current.px < x2) í 
current.px — x2; 


j 
j 
else í 

current.py += step; 
j 


If (current.py > y2) í 
current.py — y2; 


if (current.px == x2 && current.py == y2) í 
status[1] = 1; 
current.x — target.x; 
current.y — target.y; 
game.map.addBubble(current); 


game.map.clearLine(current.x, current.y, current.color, false); 
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width: game.cellCount * game.cell Width, 
height: game.cellCount * game.cell Width, 
bubbles: [], 
init: function () í 
for (var i = 0; i < game.cellCount; i++) í 
var row = []; 
for (var j = 0; j < game.cellCount; j++) í 
row.push(new Bubble(j, i, null)); 
} 
this.bubbles.push(row); 


J 
clearLine: function (x1, yl, color, isClick) í 
if (this.isEmpty(x1, y1)) í 
if (isClick) game.ready.flyin(); 


return; 
Jo 
/给 定 一 个 坐标 ， 看 是 否 有 满足 的 line 可 以 被 消除 
/4 根 线 一 | 八 
/ 横 线 


var current = this.getBubble(x1, y1); 
if (!current.color) í 
console.log(current); 
j 
var arrl, arr2, arr3, arr4; 
arr] = this.bubbles[y1]; 
arr2 = []; 
for (var y = 0; y < game.cellCount; y++) 
arr2.push(this.getBubble(x1, y)); 
arr3 = [current]; 
arr4 = [current]; 
for (var i = 1; i < game.cellCount ; i++) í 
if (xl -i>=0 && yl -i>=0) 
arr3.unshift(this.getBubble(x1 - i, y1 - 1)); 
If (x1 +i < game.cellCount && yl + í < game.cellCount) 
arr3.push(this.getBubble(x1 + i, y1 + i)); 
if (x1 - i>= 0 && yl + i< game.cellCount) 
arr4.push(this.getBubble(x1 - i, yl + i)); 
If (x1 +i < game.cellCount && y1 - i >= 0) 
arr4.unshift(this.getBubble(x1 +i, y1 - D); 
j 
var linel = getLine(arr1); 
var line2 — getLine(arr2); 
var line3 — getLine(arr3); 
var line4 = getLine(arr4); 
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var line = linel.concat(line2).concat(line3).concat(line4); 


if (line.length < 5) í 
if (isClick) game.ready.flyin(); 
return; 

j 

else í 
var me = this; 


vari- 0; 


game.play("clearline", function () ( 
if (1 == line.length) í 
game.score.addScore(line.length); 
game.stop("clearline"); 
me.isMoving = false; 
//game.ready.flyin(); 
return; 
} 
me.isMoving = true; 
var p = line[i]; 
me.setBubble(p.x, p.y, null); 
Jl 
1, 100); 
} 
function getLine(bubbles) { 
var line = []; 
for (var i = 0; i < bubbles.length; i++) í 
var b = bubbles[i]; 
if (b.color == color) í 
line.push( ( "x": b.x, "y": b.y 1); 


j 
else { 
if (line.length « 5) 
line = []; 
else 
return line; 
j 
j 
if (line.length < 5) 
return []; 
return line; 


h 
draw: function () í 
var ctx — game.ctx; 
ctx.save(); 
ctx.translate(this.startX, this.startY); 
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ctx.beginPath(); 

for (var i = 0; i <= game.cellCount; i++) í 
var pl = í * game.cellWidth;; 
ctx.moveTo(pl, 0); 
ctx.lineTo(pl, this.height); 


var p2 = í * game.cell Width; 
ctx.moveTo(0, p2); 
ctx.lineTo(this.width, p2); 

j 

ctx.strokeStyle = "#555"; 

ctx.stroke(); 


/绘制 子 元 素 〈 所 有 在 棋盘 上 的 泡 ) 

this.bubbles.forEach(function (row) í 

row.forEach(function (bubble) í 
bubble.draw(); 


J) 
J) 
ctx.restore(); 
J 
isMoving: false, 
move: function (bubble, target) ( 
var path = this.search(bubble.x, bubble.y, target.x, target.y); 
if (!path) í 
/显示 不 能 移动 s 
alert(" 过 不 去 "); 
return; 
j 
//map 开始 播放 当前 泡 的 移动 效果 
/两 种 实现 方式 ，1、map 按 路 径 染色 ， 最 后 达到 目的 地 2. map 生成 一 个 临时 
目的 地 后 移 除 


NI 

Al 
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//console.log(path); 
var me = this; 
var name = "move " + bubble.x + " " + bubble.y; 
vari- path.length - 1; 
var color — bubble.color; 
game.play(name, function () í 
if (i< 0) { 
game.stop(name); 
me.isMoving = false; 
me.clearLine(target.x, target.y, color, true); 
return; 


j 


me.isMoving = true; 
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path.forEach(function (cell) { 
me.setBubble(cell.x, cell.y, null); 
JE 
var currentCell = path[i]; 
me.setBubble(currentCell.x, currentCell.y, color); 
iet 
}, 50); 
js 
search: function (x1, y1, x2, y2) í 


var history = []; 
var goalCell = null; 


var me - this; 


getCell(x1, y1, null); 
if (goalCell) í 
var path = []; 


var cell = goalCell; 

while (cell) í 
path.push(1 "x": cell.x, "y": cell.y 3); 
cell = cell.parent; 


} 

return path; 
} 
return null; 


function getCell(x, y, parent) { 
if (x >= me.bubbles.length || y >= me.bubbles.length) 
return; 
If (x != x1 && y != y2 && !me.isEmpty(x, y)) 
return; 


for (var i = 0; i < history.length; i++) í 
if (history[i].x == x && history[i].y == y) 
return; 


var cell = í "x": x, "y": y, child: [], "parent": parent }; 
history.push(cell); 
If (cell.x == x2 && cell.y == y2) í 


goalCell = cell; 
return cell; 
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var child = []; 

var left, top, right, buttom; 

/最 短路 径 的 粗略 判断 就 是 首选 目标 位 置 的 大 致 方向 

if (x - 1 >= 0 && me.isEmpty(x - 1, y)) 
Jefg= ( "x". x-1,"y": yj; 

if (x + 1 < me.bubbles.length && me.isEmpty(x + 1, y)) 
right = ( "x": x +1, "y": y}; 

if (y + 1 < me.bubbles.length && me.isEmpty(x, y + 1)) 
buttom = í "x": x, "y": y +1 }; 

if (y - 1 >= 0 && me.isEmpty(x, y - 1)) 


M" zU. 


top = { "x": x, "y": y- 1 y; 


if (x > x2) í 
if (y> y2) 
child = [left, top, right, buttom]; 
else if (y < y2) 
child = [left, buttom, right, top]; 
else 
child = [left, top, right, buttom]; 
} 
else if (x < x2) í 
if (y > y2) 
child = [right, top, left, buttom]; 
else if (y < y2) 
child = [right, buttom, left, top]; 
else 
child = [right, top, left, buttom]; 
j 
else if (x — x2) ( 
if (y > y2) 
child — [top, left, right, buttom]; 
else if (y < y2) 
child = [buttom, left, right, top]; 


for (var i = 0; i < child.length; i++) í 
var c = child[i]; 
if (c) cell.child.push(getCell(c.x, c.y, cell); 


return cell; 
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getEmptyBubbles: function () í 
var empties = [ |; 
this.bubbles.forEach(function (row) í 
row.forEach(function (bubble) í 
if (!bubble.color) í 
empties.push(new Bubble(bubble.x, bubble.y)); 


j 
J); 
1); 
if (empties.length <= 3) í 
return []; 
} 


var result = []; 
var useds = []; 
for (var i = 0; i < empties.length; i++) í 
if (result.length == 3) í 
break; 
j 
var isUsed = false; 
var ra — game.getRandom(empties.length); 
for (var m = 0; m < useds.length; m++) í 
isUsed = ra —- useds[m]; 
if (isUsed) break; 
j 
if (lisUsed) í 
result.push(empties[ra]); 
useds.push(ra); 


j 


//console.log(useds); 
return result; 
J. 
addBubble: function (bubble) í 
var thisBubble = this.getBubble(bubble.x, bubble.y); 
thisBubble.color — bubble.color; 
J. 
setBubble: function (x, y, color) { 
this.getBubble(x, y).color = color; 
j » 
getBubble: function (x, y) ( 
if (x < 0 || y < 0 || x > game.cellCount || y > game.cellCount) return null; 
return this.bubbles[y ][x]; 
J. 
isEmpty: function (x, y) í 
var bubble = this.getBubble(x, y); 
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return !bubble.color; 


5 

ie 

var Cell = function (x, y) í 
this.x = x; 
this.y — y; 


= 一 


var Bubble = function (x, y, color) í 
this.x = x; 
this.y = y; 
this.px = game.cellWidth * (this.x + 1) - game.cellWidth / 2; 
this.py = game.cellWidth * (this.y + 1) - game.cell Width / 2; 
this.color = color; 
this.light = 10; 

h 


Bubble.prototype.draw = function () í 
if (!this.color) í 
return; 
j 
var ctx — game.ctx; 
ctx.beginPath(); 
//console.log("x:" + px  "y:" + py); 
var gradient = ctx.createRadialGradient(this.px - 5, this.py - 5, 0, this.px, this.py, this. light); 


gradient.addColorStop(0, "white"); 
gradient.addColorStop(1, this.color); 
ctx.arc(this.px, this.py, 11, 0, Math.PI * 2); 
ctx.strokeStyle = this.color; 
ctx.fillStyle — gradient; 
ctx.fill(); 
ctx.stroke(); 
h 
Bubble.prototype.play = function () í 
var me = this; 
var isUp = true; 
game.play("light "+ this.x +" " + this.y, function () í 
if (1SUp) í 
me.light += 3; 


j 

if (lisUp) í 
me.light -= 3; 

j 
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if (me.light >= 30) { 


isUp = false; 
j 
if (me.light <= 10) í 
isUp = true; 
j 
}, 50); 


J: 


Bubble.prototype.stop = function () í 
//this.light = 10; 
var me = this; 
game.stop("light "+ this.x + " " + this.y); 
game.play("restore " + this.x + " "十 this.y, function () í 
if (me.light > 10) í 


me.light--; 
} 
else í 
me.light = 10; 
game.stop("restore "+ me.x + " " + me.y); 
} 
j» 50); 
h 
game.start(); 
</script> 
</body> 
</html> 


执行 后 的 效果 如 图 14-7 所 示 。 


score:0 


图 14-7 执行 效果 
mm 367 


HTML 5 天 发 从 入 门 到 精通 


14.1. 让 网 页 中 的 图 片 div 竖 向 滑动 


本 实例 的 功能 是 让 图 片 div 竖 向 滑动 ， 本 实例 的 核心 是 JavaScript 代码 ， 


[m] 


iz 


EY 


AI 


在 里 面 没 


有 图 片 ， 但 读者 可 根据 自己 的 需求 加 上 图 片 。 当 鼠标 放 在 图 片上 后 图 片 层 会 上 下 滑动 。 


实例 14-7 说 明 
源码 路 径 daima\14\7.html 
功能 让 网 页 中 的 图 片 DIV 竖 向 滑动 


实例 文件 7.html 的 实现 代码 如 下 。 


<!DOCTYPE HTML> 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 


<title> 图 片 滑 动 展示 效果 </title> 
«script type="text/javascript"> 
var $$ = function (id) í 
return "string" == typeof id ? document.getElementByld(id) : id; 


h 
function Event(e) ( 
var oEvent = document.all ? window.event : e; 
if (document.all) í 
if(oEvent.type == "mouseout") í 
oEvent.relatedTarget = oEvent.toElement; 
yelse if(oEvent.type == "mouseover") í 
oEvent.relatedTarget = oEvent.fromElement; 


j 


return oEvent; 
j 
function addEventHandler(oTarget, sEventType, fnHandler) í 
if (oTarget.addEventListener) í 
oTarget.addEventListener(sEventType, fnHandler, false); 
) else if (oTarget.attachEvent) í 
oTarget.attachEvent("on" + sEventType, fnHandler); 
yelse í 
oTarget["on" + sEventType] = fnHandler; 


h 
var Class = í 
create: function() ( 
return function() í 
this.initialize.apply(this, arguments); 
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Object.extend = function(destination, source) { 
for (var property in source) { 
destination[property] = source[property |; 
} 


return destination; 


var GlideView = Class.create(); 
GlideView.prototype = í 
/容器 对 象 容器 宽度 展示 标签 展示 宽度 
initialize: function(obj, iHeight, sTag, iMaxHeight, options) í 
var oContainer = $$(obj), oThis-this, len = O;this.SetOptions(options); 
this.Step = Math.abs(this.options.Step); 
this.Time = Math.abs(this.options.Time); 
this. list = oContainer.getElementsByTagName(sTag); 
len = this. list.length; 
this. count — len; 
this. height — parseInt(1Height / len); 
this. height max = parseInt(iMaxHeight); 
this. height min = parseInt((iHeight - this. height max) / (len - 1)); 
this. timer — null; 
this.Each(function(oList, oText, i) í 
oList. target = this. height * i;// 自 定义 一 个 属性 放 目 标 left 
oList.style.top = oList. target + "px"; 


oList.style.position = "absolute"; 

addEventHandler(oList, "mouseover", function() í oThis.Set.call(oThis, 1); 1); 
D 
/容器 样式 设置 
oContainer.style.height = iHeight + "px"; 


oContainer.style.overflow = "hidden"; 
oContainer.style.position = "relative"; 

/移出 容器 时 返回 默认 状态 
addEventHandler(oContainer, "mouseout", function(e)í 
/变通 防止 执行 oList 的 mouseout 

var o = Event(e).relatedTarget; 


if (oContainer.contains ? !oContainer.contains(o) : oContainer != o && !(oContainer.compare 
DocumentPosition(o) & 16)) oThis.Set.call(oThis, -1); 


J) 

lc 

/设置 默认 属 | 

SetOptions: function(options) í 

this.options = {// 默 认 值 

Step:20,// 滑 动 变 化 率 
Time:3,// 滑 动 延 时 
TextTag:"",// 说 明 容 器 tag 


I 
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TextHeight: 0// 说 明 容器 高 度 
h 
Object.extend(this.options, options || (3); 
h 
/相关 设置 
Set: function(index) í 
if (index < 0) í 
/鼠标 移出 容器 返回 默认 状态 
this.Each(function(oList, oText, i) í oList. target = this. height * i; if(oText)( oText. target = 
this. height text; } }) 


yelse í 
/鼠标 移 到 茶 个 滑动 对 象 上 
this.Each(function(oList, oText, i) í 
oList. target = (i <= index) ? this. height min * i: this. height min * (i - 1) + this. _ 
height max; 


if(oText)( oText. target = (i == index)? 0 : this. height text; ) 


» 
j 
this.Move(); 
jc 
/移动 


Move: function() í 
clearTimeout(this. timer); 
var bFinish = true;// 是 否 全 部 到 达 目 标 地 址 
this.Each(function(oList, oText, i) í 
var INow = parselnt(oList.style.top), iStep = this.GetStep(oList. target, INow); 
if (iStep != 0) í bFinish = false; oList.style.top = (Now + iStep) + "px"; | 


J) 
/未 到 达 目 标 继续 移动 
if (!bFinish) í var oThis = this; this. timer = setTimeout(function(){ oThis.Move(); }, this.Time); ) 


» 
/获取 步 长 
GetStep: function(1Target, INow) í 
var iStep = (iTarget - INow) / this.Step; 
if (iStep == 0) return 0; 
if (Math.abs(iStep) < 1) return (iStep > 0? 1 : -1); 
return iStep; 
h 
Each:function(fun) í 
for (var i = 0; i < this. count; i++) 
fun.call(this, this. list[1], (this.Showtext ? this. text[1] : null), i); 
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</script> 
«style type="text/css"> 
#idGlideView { 


height:314px; 
width:325px; 
margin:0 auto; 

j 

#idGlideView div í 
width:325px; 
height:314px; 

j 

</style> 

</head> 

<body> 


<div id="idGlideView"> 
«div style="background-color:#006699;"> </div> 
<div style="background-color:#FF9933;"> </div> 
</div> 
<SCRIPT> 
var gv = new GlideView("idGlideView", 314, "div", 280,""); 
</SCRIPT> 
</body> 
</html> 


执行 后 的 效果 如 图 14-8 示 。 


VR] 


14-8. 执行 效果 


14.8 ”实现 滑动 门 特效 


本 实例 的 功能 是 ， 在 网 页 中 实现 滑动 门 特 效 。 如 果 将 鼠标 放 在 主 菜单 上 ， 下 边框 架 内 的 
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内 容 会 跟着 变换 ， 鼠 标 不 需要 单 击 ， 只 需要 滑 上 去 就 可 切换 内 容 ， 像 一 肩 门 ， 所 以 叫做 “ 清 
动 门 ”菜单 。 


实例 14-8 说 明 
源码 路 径 daima\14\8.html 
功能 fE HTML 5 网 页 中 实现 滑动 门 特效 


实例 文件 8.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 
<head> 
<title> 简 洁 TAB</title> 
«script type="text/javascript"> 
function nTabs(thisObj, Num) í 
if (thisObj.className == "active") return; 
var tabObj =thisObj.parentNode.id;/ 赋 值 指定 节点 的 父 节点 的 id 名字 
var tabList = document.getElementByld(tabObj).getElementsByTagName("li"); 
for (i = 0; i < tabList.length; i+) {// 点 击 之 后 ， 其 他 tab 变 成 灰色 ， 内 容 隐藏 ， 只 有 点 


击 的 tab AL 247 Js H 


FH 


if (i == Num) í 

thisObj.className = "active"; 

document.getElementById(tabObj + " Content" + 1).style.display = "block"; 
y else í 

tabList[1].className = "normal"; 

document.getElementByld(tabObj + " Content" + i).style.display = "none"; 


j 

j 

j 

</script> 
<style type="text/css"> 

* 

1 
margin: 0; 
padding: 0; 
list-style: none; 
font-size: 14px; 

j 

.nTab 

1 
width: 500px; 
height:200px; 
margin: 20px auto; 
border: 1px solid 2333; 
overflow: hidden; 

j 


372 BH 


第 14 = 


none 

1 
display: none; 

j 

.nTab .TabTitle li 

1 
float: left; 
cursor: pointer; 
height: 35px; 
line-height: 35px; 
font-weight: bold; 
text-align: center; 
width: 124px; 

} 

.nTab .TabTitle li a 

{ 
text-decoration: none; 

} 

.nTab .TabTitle .active 

{ 


background-color:blue; 
color: #336699; 

1 

f 


.nTab .TabTitle .normal 


1 
color: ZF1ACIC; 
j 
.nTab .TabContent 
{ 
clear: both; 
overflow: hidden; 
background: #fff; 
padding: 5px; 
display: block; 
height: 100px; 
j 
</style> 
</head> 
<body> 


<div class="nTab"> 
<div class="TabTitle"> 
<ul id="myTab"> 
<li class="active" onmouseover="nTabs(this,0);">ASP</li> 


<li class="normal" onmouseover="nTabs(this,1);">PHP2</li> 


<li class="normal" onmouseover="nTabs(this,2);">PHP3</li> 
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<li class="normal" onmouseover="nTabs(this,3);">PHP4</li> 


</ul> 
</div> 
<div class="TabContent" > 
<div id="myTab_Content0"> 
第 一 块 内 容 </div> 
«div id="myTab_Content1" class="none"> 
第 二 块 内 容 </div> 
«div id-"myTab Content2" class="none"> 
第 三 块 内 容 </div> 
«div id="myTab_Content3" class="none"> 


第 四 块 内 容 </div> 
</div> 
</div> 
</body> 
</html> 


执行 后 的 效果 如 图 14-9 示 。 


PHP4 


图 14-9 执行 效果 


14.9 ”实现 上 下 可 拖 动 效果 


本 实例 的 功能 是 ， 在 网 页 中 实现 类 似 QQ 对 话 框 上 下 部 分 可 拖 动 效果 。 这 是 一 款 经 典 的 


特效 ， 在 IE 或 火狐 以 及 Chrome 等 浏览 器 都 能 正常 运行 。 操 作 方 法 是 : 上 下 拖 动 红 条 改变 显 
显示 下 部 的 内 容 ， 往 下 拖 则 全 部 显示 上 部 的 内 容 。 


示 区 域 高 度 ， 往 上 则 全 前 


实例 14-9 说 BJ 
源码 路 径 daima\14\9.html 
功能 在 网 页 界面 框 中 实现 上 下 可 拖 动 效 果 


实例 文件 9.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 
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«meta http-equiv="Content-Type" content-"text/html; charset=utf-8" /> 
<title> 类 似 QQ 对 话 框 上 下 部 分 可 拖 动 代码 -例子 代码 </title> 
<style> 
ul,li{margin:0;padding:0;} 
body {font:14px/1.5 Arial;color:#666;} 
#box{position:relative;width:600px;height:400px;border:2px solid #000;margin: 10px auto;overflow: hidden; } 
#box ul {list-style-position:inside;margin: 10px;} 
#box div{position:absolute;width:100%;} 
#top,#bottom {color:#F FF;height:100%;overflow:hidden;} 
#top {background:green;} 
#bottom {background:skyblue;top:50%} 
#line {top:50%;height:4px;overflow:hidden;margin-top:-2px;background:red;cursor:n-resize; } 
</style> 
<script> 
function $(id) { 
return document.getElementBylId(id) 


j 
window.onload = function() í 
var oBox = $("box"), oBottom = S("bottom"), oLine = $("line"); 
oLine.onmousedown = function(e) í 
var disY = (e || event).clientY ; 
oLine.top — oLine.offsetTop; 
document.onmousemove = function(e) í 
var iT = oLine.top + ((e || event).clientY - disY); 
var maxT = oBox.clientHeight - oLine.offsetHeight; 
oLine.style.margin — 0; 
iT « 0 && (iT = 0); 
iT > maxT && (iT = maxT); 
oLine.style.top = oBottom.style.top = iT + "px"; 
return false 
h 
document.onmouseup = function() í 
document.onmousemove = null; 
document.onmouseup - null; 
oLine.releaseCapture && oLine.releaseCapture() 


h 
oLine.setCapture && oLine.setCapture(); 
return false 
h 
h 
</script> 
</head> 
<body> 


<center> 上 下 拖 动 红 条 改变 显示 区 域 高 度 </center> 
«div id="box"> 
«div id="top"> 
<ul> 
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<li>jQuery 初学 实例 代码 集 </]> 
<li>100 多 个 ExtJS 应 用 初学 实例 集 </li> 
<] 记 基于 jQuery 的 省 、 市 、 县 三 级 级 联 菜单 </i> 
<li> 最 新 通用 精简 版 </ 二 > 
<li>FCKeditor 2.6.4.1 网 页 编辑 器 </l 放 > 
<li>jQuery 平滑 图 片 滚动 </i> 
<li>Xml+JS 省 市 有 具 三 级 联动 菜单 </li> 
<li>jQuery 鼠标 滑 过 链接 文字 弹出 层 提示 的 效果 </li> 
<li>JS 可 控制 的 图 片 左右 深 动 特效 (走马 灯 )〉</li> 
</ul> 

</div> 

<div id="bottom"> 

<ul> 
<]i> 网 页 上 部 大 Banner 广告 特效 及 图 片 横向 滚动 代码 </a></i> 
<li>FlexSlider 网 页 广告 、 图 片 焦点 图 切换 插件 </a></i> 
<]i> 兼 容 理 ， 火 狐 的 JavaScript FE Fr Ifi 
<li>jQuery 仿 ios 无 线 局 域 网 WIFI IERA GAMIO </li> 
<li>TopUp js 图 片 展 示 及 弹出 层 特 效 代码 </i> 
<li>jQuery 仿 Apple 苹果 手机 放大 镜 阅 读 效 果 </a></i> 
<li>Colortip 文字 title 多 样式 提示 插件 </ 人 > 
<]i> 网 页 换 肤 ，Ajax 网 页 风格 切换 代码 集 </i> 
<]i> 超 强大 、 漂 亮 的 蓝 色 网 页 弹出 层 效 果 </I> 
<li>jQuery 图 像 预览 功能 的 代码 实现 </i> 
</ul> 

</div> 

<div id="line"></div> 
</div> 
</body> 
</html> 


执行 后 的 效果 如 图 14-10 示 。 


e FCKeditor 2 1 图 向 编辑 器 


。 网 页 上 部 大 Banner 广 告 特效 及 图 片 横向 滚动 代码 
。 FlexSlider 网 页 广告 、 图 片 焦点 图 切换 插件 

。 兼容 IE， 火 狐 的 JavaScrip 姻 片 切 换 

。 jQuery 仿 ios 无 绪 局 域 网 WIF 旧 示 效 果 ( 折 委 面 板 ) 


。 TopUp js 图 片 展示 及 弹出 层 特效 代码 

。 jQuery 仿 Apple 苹 果 手机 放大 镜 阅 读 效 果 
* Colortip 文字 title 多 样式 提示 插件 

。 网 页 换 肤 ，Ajax 网 页 风格 切换 代码 集 

。 超 强 大 、 漂 亮 的 蓝 色 网 页 弹出 层 柳 果 

。 jQuery 图像 预览 功能 的 代码 实现 


图 14-10 ”执行 效果 
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14.10 ”在 网 页 中 实现 粒子 特效 效果 
本 实例 的 功能 是 ， 在 网 页 中 实现 粒子 特效 效果 。 粒 子 特效 是 为 模拟 现实 中 的 水 、 火 、 雾 、 
气 等 效果 ， 由 各 种 三 维 软件 开发 的 制作 模块 ， 原 理 是 将 无 数 的 单个 粒子 组 合 ， 使 其 呈现 出 固 
定形 态 ， 由 控制 器 ， 脚 本 来 控制 其 整体 或 单个 的 运动 ， 从 而 模拟 出 真实 的 效果 。 


9A 


实例 14-10 说 HJ 
源码 路 径 daima\14\10.html 
功能 在 网 页 中 实现 粒子 特效 效果 


实例 文件 10.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 
«html lang="en"> 

<head> 
«meta charset=utf-8> 
<title> 粒 子 效果 演示 </title> 
«meta name="description" content-"HTMLS5/canvas demo, 500 particles to play around with." 

[^ 
«meta name-"keywords" 
content-"html5,canvas,javascript,particles,interactive,velocity,programming,flash" /> 

«script type-"text/Javascript" sre="js10.js"></script> 
<link rel="stylesheet" type="text/css" href£-"pages.css" /> 

</head> 

<body> 
<div id="outer"> 

<div id="canvasContainer"> 
«canvas id="mainCanvas" width="1000" height="560"></canvas> 
<div id="output"></div> 
</div> 
</div> 
</script> 
</body> 
</html> 


脚本 文件 js10.js 的 实现 代码 如 下 。 


(function(){ 
var PI 2 — Math.PI * 2; 
var canvasW — 1000; 
var canvasH — 560; 
varnumMovers = 600; 
var friction = 0.96; 
var movers =j]; 
var canvas; 
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var ctx; 

var canvasDiv; 

var outerDiv; 

var mouseX; 

var mouseY; 

var mouseV X; 

var mouseV Y; 

var prevMouseX; 
var prevMouseY; 
var isMouseDown; 


function init() ( 
canvas = document.getElementBylId("mainCanvas"); 


if ( canvas.getContext ){ 
setup(); 
setInterval( run , 33 ); 
trace(' 你 们 好 ); 
j 
else í 
trace("Sorry, needs a recent version of Chrome, Firefox, Opera, Safari, or Internet 
Explorer 9."); 


function setup() í 
outerDiv = document.getElementBylId("outer"); 
canvasDiv = document.getElementBylId("canvasContainer"); 
ctx = canvas.getContext(" 2d"); 
var i - numMovers; 
while ( i-- ){ 
var m = new Mover(); 
mx = canvasW * 0.5; 
m.y  -canvasH * 0.5; 
m.vX = Math.cos(1) * Math.random() * 34; 
m.vY = Math.sin(i) * Math.random() * 34; 


movers[i] = m; 
mouseX = prevMouseX = canvasW * 0.5; 
mouseY = prevMouseY = canvasH * 0.5; 
document.onmousedown = onDocMouseDown; 


document.onmouseup = onDocMouseUp; 
document.onmousemove = onDocMouseMove; 


378 mg 


第 14 章 特效 实战 


function run(){ 
ctx.globalCompositeOperation = "source-over"; 
ctx.fillStyle = "rgba(8,8,12,0.65)"; 
ctx.fillRect( 0 , 0 , canvasW , canvasH ); 


ctx.globalCompositeOperation — "lighter"; 


mouseVX — mouseX - prevMouseX; 
mouseV Y — mouseY - prevMouseY; 
prevMouseX = mouseX; 
prevMouseY = mouseY; 


vartoDist = canvasW * 0.86; 
var stirDist = canvasW * 0.125; 
var blowDist = canvasW * 0.5; 
var Mrnd = Math.random; 
var Mabs = Math.abs; 
var i = numMovers; 
while ( i-- )1 

varm = movers[i]; 

varx =m.x; 

vary =my; 

var vX = m.vX; 

var VY = m.vY; 


var dX = x - mouseX; 

var dY =y - mouse Y; 

vard = Math.sqrt( dX * dX + dY * dY ) || 0.001; 
dX =d; 

dY =d; 


if ( isMouseDown ){ 
if ( d < blowDist ){ 
var blowAcc = ( 1 - ( d / blowDist ) ) * 14; 
vX += dX * blowAcc + 0.5 - Mrnd(); 
vY += dY * blowAcc + 0.5 - Mrnd(); 


j 
j 
if ( d < toDist ){ 
var toAcc = ( 1 - (d/toDist ) ) * canvasW * 0.0014; 
vX -= dX * toAcc; 
vY -= dY * toAcc; 
j 
if (d < stirDist )( 
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ctx.arc( nextX , nextY , sc , 0, PI 2 , true ); 
ctx.closePath(); 
ctx.fill(); 


function onDocMouseMove( e ) í 
var ev = e? e : window.event; 
mouseX - ev.clientX - outerDiv.offsetLeft - canvasDiv.offsetLeft; 
mouseY = ev.clientY - outerDiv.offsetTop  - canvasDiv.offsetTop; 


= 一 


function onDocMouseDown( e )í 
isMouseDown = true; 
return false; 


function onDocMouseUp( e )í 
isMouseDown - false; 


return false; 
j 
function Mover()( 
this.color = —"rgb" + Mathfloor( Math.random()*255 ) + "" + 
Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + ")"; 
this.y = 0; 
this.x Ü 
this.vX -0; 
this.vY -0; 
this.size —1; 
j 


function rect( context , x, y , w, h )( 
context.beginPath(); 
context.rect( x,y, wW, h ); 
context.closePath(); 
context.fill(); 


function trace( str ) í 
document.getElementBylId("output").innerHTML = str; 
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样式 文件 pages.css 的 实现 代码 如 下 。 
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margin-top:4px; 


} 
#footer{ 
font-size: 0.6em; 
font-family: Arial, Helvetica, sans-serif; 
position: absolute; 
bottombottom:8px; 
width:98%; 
} 


执行 后 的 效果 如 图 14-11 示 。 


图 14-11 执行 效果 
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无 论 是 Web 项 目 还 是 桌面 项 目 ， 根 据 面向 对 象 的 编程 思想 ， 经 常会 将 各 种 在 一 个 项 目 中 
使 用 多 次 的 功能 进行 单独 开发 ， 一 般 将 这 个 功能 称 之 为 一 个 模块 。 本 章 学 习 网 页 设计 中 常用 
的 模块 。 


151 一 个 项 目 引 发 的 问题 


tT 


在 Web 设计 中 ， 模 块 的 用 处 就 是 组 装 。 例 如 开发 一 个 典型 企业 动态 Web， 对 于 网 站 中 的 
会 员 系 统 ， 可 以 参考 收集 的 登录 验证 模块 和 会 员 管理 模块 实现 ， 对 于 企业 产品 展示 ， 可 以 参 
考 收集 的 的 产品 展示 模块 来 实现 ， 完 全 可 以 将 源码 原封 不 动 地 搬 过 来 ， 只 是 把 图 片 进行 了 替 
换 和 修改 。 整 个 结构 如 图 15-1 所 示 。 


典型 企业 网 站 


图 15-1 模块 在 典型 企业 网 站 中 的 作 


cu 


在 设计 的 初级 阶段 ， 用 户 可 以 借用 模块 来 实现 自己 的 功能 。 随 着 技术 的 增长 和 项 目的 增 
多 ， 每 个 设计 师 都 会 有 很 多 套 属于 自己 的 作品 。 

设计 师 们 热衷 于 讨论 如 何 提 高 网 页 设计 效率 的 问题 , 其 实 最 好 的 方法 莫 过 于 模块 化 例如 ， 
Æ PSD 吧 可 公开 下 载 顶 尖 设 计 档 次 的 企业 网 站 、 商 业 网 页 模板 ， 并 授权 用 于 商业 ， 可 大 大 提高 
网 页 设计 的 效率 。 如 图 15-2 Pr. 

另外 ， 像 来 自 美 国 ， 现 在 风靡 亚洲 的 怪兽 模板 网 站 ， 其 网 站 上 的 网 站 模板 设计 具有 很 高 
的 水 平 。 如 图 15-3 所 示 。 
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首页 ”全 部 模板 ”会员 注册 KBR = H Sae fet 是 升 还 是 搅局 ? 给 设计 师 们 的 话 


所 有 模板 门户 模板 BERK 房地产 娱乐 游戏 卡通 动漫 工业 机 械 
设计 广告 个 人 主页 学 校 教育 新 能 源 装饰 建材 婚庆 礼仪 交通 运输 
宗教 汽车 运动 购物 IT| 通 讯 旅游 服饰 儿童 医药 其 他 免费 


让 天 个 
A d sd is M 
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，3 大 来 源 当道 确保 我 们 的 模板 高 送 目 独家 
D 顶 从 设计 师 特 约 供稿 
© PSD8 模 板 团队 精心 设计 

e 花费 巨 资 从 国外 短 选 引进 

"PSD 吧 让 我 们 不 怕 没 预付 要 竞标 的 客户 


gzeri 四 spray 
国 aishi Bxiong 
ülwindo &wjyhl 


名 称 : 品牌 家 居 
浏览 详细 ”价格 : 1.5P 币 浏览 详细 ”价格 : 3p 币 
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图 15-2 PSD 吧 


WebShop 
^ New Products Specials My Account View Cart 


Search for D Advanced Search g r cartis emph Language: [Engish = =] Currency: [US Dolar - 


Email: 


Zen Cart China (32) 
Zen Cart News (4) 


Password: 


Forgotten Password 


* Hardware Create Account 
ER 
* DVD Movies 
* Gift Certificates . learn more 
Customer Service 
* Big Linked 
* Test Examples New Products For October p of Use 
Ipping 
* Test 1096 Bases 
* Test 10% by Attrib About Us 
* Free Call Stuff Newsletter 
Contact Us 
* ATop Level Cat 
* Sale Percentage - 
* Sale Deduction Russ Tippins Band - The Hunter Test Document 
* Sale New Price 54.89. $3.00 
— 7 Save: 40% off B] 


图 15-3 Zen Cart 


在 本 书 介绍 的 上 述 网 站 中 ， 有 大 量 的 PSD 模板 、HTML 模板 ， 特 别 是 很 多 欧美 和 韩 
国 设计 师 们 的 首页 HTML 模板 。 用 户 可 以 下 载 使 用 ， 快 速 领略 顶尖 设计 师 们 的 风采 。 所 
以 本 章 就 不 花费 篇 幅 讲解 HTML 模板 和 CSS 模板 了 。 下 面 将 简单 介绍 几 个 常用 的 
JavaScript 特效 模板 。 


15.2 JavaScript 特效 的 应 用 


JavaScript 作为 脚本 语言 , 它 能 够 为 网 页 实现 基本 的 动态 效果 , 吸引 用 户 对 页 面 的 关注 度 。 
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JavaScript 在 网 页 中 的 应 用 主要 体现 在 如 下 6 个 方面 : 

1. 文字 处 理 

文字 是 页 面 的 基础 , 通过 JavaScript 处 理 后 的 文字 将 会 带 来 令 人 叹为观止 的 效果 。 图 15-4 
就 是 经 典 纯 JavaScript 处 理 的 Web 主页 。 

2. 时 间 处 理 

网 页 动态 时 间 显示 功能 十 分 必要 ， 它 能 够 为 浏览 者 带 来 额外 服务 的 感知 。 通 常 程序 员 会 
使 用 编程 语言 来 实现 , 但 是 JavaScript 同样 能 够 实现 动态 的 时 间 显 示 效 果 。 例如 论坛 内 的 发 帖 
时 间 就 可 以 通过 JavaScript 来 实现 ， 如 图 15-5 所 示 。 


> 友情 链接 


* 
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图 15-4 文字 处 理 特效 图 15-5 时间 处 理 特效 


3. 图 像 处 理 

图 像 处 理 即 对 站 内 图 片 的 处 理 , 可 以 使 用 JavaScript 对 站 内 素材 图 片 进行 修饰 , 实现 普通 
图 片 素材 没有 的 功能 。 如 图 15-6 所 示 。 

4. 背景 处 理 

背景 处 理 即 对 页 面 各 种 背景 效果 的 处 理 ， 例 如 文字 背景 和 图 像 背景 。 图 15-7 就 是 经 过 
JavaScript 处 理 后 的 文字 背景 。 


图 15-6 图 像 处 理 特效 图 15-7 背景 处 理 特效 
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5. 鼠标 处 理 
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鼠标 是 用 户 进行 信息 浏览 的 必要 工具 , 通过 JavaScript 可 以 使 用 户 当 前 的 操作 鼠标 实现 绚 
丽 的 效果 。 图 15-8 就 是 最 普通 的 鼠标 特效 效果 。 

6. 菜单 处 理 

菜单 是 一 个 站 点 的 必要 的 构成 元 素 ， 它 能 够 方便 于 用 户 对 站 内 信息 的 浏览 。 通 过 


JavaScript 可 以 对 站 内 的 菜单 进行 修饰 ， 以 吸引 月 


HOME PORTFOLIO 


fusion] 


+ welcome 


7 Wenvato 


"hes. e 


图 15-8 ”鼠标 处 理 特效 


153 ”文字 处 理 


在 页 面 设计 过 程 中 
技术 处 理 后 的 页 面 文字 ， 可 以 实现 CSS 不 能 达到 
效 处 到 


mj 


, 


通常 需要 对 文字 进行 修 


的 实例 ， 向 读者 讲解 JavaScript 文字 处 理 的 方法 


日 户 的 眼球 。 如 图 15-9 所 示 。 


engage 


图 15-9 菜单 处 理 特 


饰 ， 实 现 特殊 的 显示 效果 。 而 经 过 JavaScript 
| 的 效果 。 在 本 节 的 内 容 中 将 通过 一 个 文字 特 


"a 


pil 


o 


实例 15-1 说 HJ 
源码 路 径 光 得 :\daima\15\ 文 字 \1.html、1.js 
功能 JavaScript 实现 文字 特效 
15.3.1 ”实例 概述 


`= 


pil 


本 实例 的 基本 功能 是 ， 


化 和 渐 隐 浙 现 效果 。 本 实例 实现 文件 的 具体 说 明 如 下 。 
口 文件 1.html: 调用 JavaScript 样式 设置 。 


O 文件 1.js: 通过 JavaScript 设置 文本 站 


的 显示 颜色 ; (2) 指定 要 处 理 的 文本 内 容 ; (3) 
使 文本 亮度 逐渐 增加 ; (4) 定义 函数 ， 使 文本 亮 
(5) 定义 变换 频率 。 

上 述 操作 的 运行 流程 如 


图 15-10 所 示 。 


的 显示 样式 。 
其 中 文件 1js 的 其 体 操作 流程 如 下 : (1〉 定 义 文本 不 同 


过 JavaScript 技术 设置 指定 文本 的 显示 样式 , 实现 文本 的 色彩 变 


定义 函数 ， 亮度 减 小 处 理 
度 逐 渐 减 小 ; 


定义 变换 频率 


图 15-10 ”实例 运行 流程 图 
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15.3.2 ”定义 文本 颜色 


定义 文本 颜色 的 功能 是 设置 页 面 中 文本 的 各 种 显示 颜色 。 定 义 的 各 种 颜色 值 由 数组 
textcolor 保存 起 来 。 其 具体 实现 代码 如 下 。 


var thissize-20 // 设置 字体 大 小 

var textfont-" RP" / 设置 字体 

var textcolor= new Array() / 设置 数组 ， 保 存 19 种 文本 颜色 
textcolor[0]="#FFFFFF" / 依次 设置 数组 保存 的 文本 颜色 值 


textcolor[1]="000000" 
textcolor[2]-"000000" 
textcolor[3]-"111111" 
textcolor[4]-" 151515" 
textcolor[5]-" 333333" 
textcolor[6]-"444444" 
textcolor[7]-" 555555" 
textcolor[8]-" 666666" 
textcolor[9]-" 777 T7" 
textcolor[10]-" 888888" 
textcolor[11]-"999999" 
textcolor[12]-"aaaaaa" 
textcolor[13]-"bbbbbb" 
textcolor[14 ]-"cccccec" 
textcolor[15]-"dddddd" 
textcolor[16]-"eeeeee" 
textcolor[18 ]-"£fffff" 
textcolor[18 ]-"£fffff" 


15.3.3 ”指定 文本 内 容 
指定 文本 内 容 的 功能 是 设置 
实现 代码 如 下 。 


var message = new Array() / 设置 数组 ， 保 存 四 段 显示 的 文本 
message[0]-"http://www.good777.cn" 

message[1]=" 这 里 是 你 的 乐园 " 
message[2]=" 欢 迎 您 的 光临 " 


message[3]=" 学 习 javascript" 


BE 


:页 面 中 显示 的 文本 信息 ， 然 后 通过 数组 保存 起 来 。 其 具体 


i message=0 


153.4 “文本 增 亮 处 理 

文本 增 亮 功能 是 由 函数 glowtext0 实 现 的， 能 够 使 指定 文本 的 亮度 逐渐 增加 。 其 具体 实现 
代码 如 下 : 
388 HH 


15.3.5 


第 15 章 Web 设计 中 的 典型 模块 ， 


var i strength=0 / 设置 初始 值 

vari message=0 / 设置 初始 值 

var timer 

function glowtext() f / 设置 增 亮 函数 

if(document.all) í 

if (i strength <=18) í // 如 果 是 正 浏览 器 且 亮 度 值 小 于 或 等 于 18， 则 开始 增 亮 处 理 


mm.innerText-message[i message] 
document.all.mm.style.filter-"glow(color-"--textcolor[i strength ]--", strength—-4)" 
i_strength++ 

timer-setTimeout("glowtext()",10) / 设置 每 10ms 执行 一 次 增 亮 函数 

} 


else í 


clearTimeout(timer) 

setTimeout("deglowtext()",15) / 亮度 值 大 于 18， 则 调用 亮度 减 小 函数 
} 

j 

} 


文本 减 亮 处 理 


文本 减 亮 功能 是 由 函数 deglowtext0 实 现 的 ， 能 够 使 指定 文本 的 亮度 逐渐 减 小 。 其 具体 实 
现代 码 如 下 : 


15.3.6 


function deglowtext() { / W EIRE ERA 
if(document.all) í 
if(i strength >=0) ( / 如 果 是 正 浏览 器 且 亮 度 值 大 于 0， 则 开始 减 亮 处 理 


mm.innerText-message[i message] 
document.all.mm.style.filter-"glow(color-"--textcolor[i strength ]--", strength—-4)" 

1 strength-- 

timer-setTimeout("deglowtext()",100) / 设置 每 100ms 减 亮 一 次 ， 直 至 最 暗 
} 


else { 


clearTimeout(timer) 

i Imessage+ 十 

if (i message>=message.length) (i message=01 // 如 果 执 行 完毕 ， 则 恢复 初始 设置 
1 strength=0 


Ti 


intermezzo() 

} 

} 

} 

定义 变换 频率 


变换 频率 的 功能 是 设置 文本 样式 变换 的 执行 频率 , 该 功能 是 由 函数 intermezzo O 实现 的 ， 
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其 具体 实现 代码 如 下 。 


function intermezzo() í 

mm.innerText-"" 

setTimeout("glowtext()",1500) / 设置 每 1500ms 后 重新 调用 增 量 函数 
} 


文件 1.html 通过 调用 脚本 代码 实现 文本 变换 的 最 终 效果 ， 其 具体 实现 代码 所 示 。 


«html xmlns="http://www.w3.ore/1999/xhtml"> 


«style type="text/css"> 


<!-- 
body í 
background-color: #9966FF; PRCEUBEA GS 
j 
=> 
</style> 
</head> 
<script language=javaScript src="1.js"></script> ”<!-- 调 用 脚本 --> 
«body onLoad="glowtext()"> <!-- 载 入 增 亮 函数 --> 


«div id="mm" style="position:absolute;visibility:visible;width:600px;text-align:center; 
top:150px;left:50px;font-family: 隶 书 ;font-size:30pticolor:000000"></div> 

</body> 

</html> 


经 过 上 述 操作 流程 后 ， 整 个 实例 文件 设计 完毕 ， 其 详细 代码 读者 可 以 参阅 本 书 光 盘 中 的 
对 应 文件 。 实 例文 件 的 最 终 显示 效果 分 别 如 图 15-11、 图 15-12 所 示 。 


图 15-11 显示 效果 图 图 15-12 显示 效果 图 


15.4 ”时 间 处 理 模块 


在 Web 页 面 设 计 过 程 中 ， 通 常 需要 显示 系统 的 当前 时 间 。 本 节 将 通过 一 个 典型 模块 实例 
390 mms 


的 实现 过 程 ， 向 
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用 户 讲解 JavaScript 进行 时 间 处 理 的 方法 


本 实例 的 基本 功能 是 ， 通 过 JavaScript 技术 获取 当前 的 名 


实例 15-2 说 明 
源码 路 径 daimaM 5VET [R]M html 
功能 JavaScript 获取 当前 系统 的 时 间 


Sx 


CD 通过 函数 getYear0 获 取 当 前 年 
(2) 通过 函数 getMonthO 获 取 当 前 


F 为 “1.html”， 其 操作 流程 如 下 : 


V 
分 。 


34. 


(3) 通过 函数 getDate0 获 取 当 前 日 数 。 
(4) 通过 数组 d 获取 当前 周 数 。 
文件 1.html 的 实现 代码 如 下 。 


«html xmlns-"http://www.w3.org/1999/xhtml"7 


«style type="text/css"> 
«I-- 
body í 
background-color: #9966FF; 
j 
> 
</style> 
</head> 
<body bgcolor="#999999"> 


«script language-javaScript sre="1.js"> 
today-new Date(); 

function initArray() í 
this.length-initArray.arguments.length 
for(var i=0;i<this.length;i++) 

this[i+1 ]=initArray.arguments[i] } 

var d=new initArray( 


"EWH", 
"星期 一 "， 
"星期 二 "， 
"星期 三 "， 
"星期 四 "， 
"Eg SUB Tr", 
"星期 六 "); 
document.write( 


REK 


F. H. HME 


明 几 。 本 实例 的 实 


H 


景 颜色 */ 


/ 获取 时 
/ 定义 函 


间 


// KER 


值 


I| 数组 依次 保存 星期 几 


p 


/ 输出 当前 时 间 


"<font color=##000000 style='font-size:9pt;font-family: RRS", 


today.getYear()," 4E", 

today.getMonth()*-1," H", 
today.getDate()," H", 
d[today.getDay()--1], 


M REE 
/ 获取 月 
/ 获取 日 
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"</font>" ); 
</script> 
</body> 
</html> 


上 述 实例 代码 的 执行 效果 如 图 15-13 所 示 。 


图 15-13 ”显示 效果 图 


15.5 ”图 像 处 理 模块 


在 网 页 设计 过 程 中 ,通常 需要 对 图 像 进行 修饰 以 实现 特殊 的 显示 效果 。 而 经 过 JavaScript 
技术 处 理 后 的 页 面 图 像 ， 可 以 实现 CSS 不 能 达到 的 效果 。 接 下 来 将 通过 一 个 典型 的 图 像 特效 
处 理 模 块 实例 的 实现 过 程 ， 向 用 户 讲 解 使 用 JavaScript 处 理 图 像 的 方法 。 


实例 15-3 说 BJ 
源码 路 径 daima\15\ 图 像 \1.html 和 1.js 
功能 JavaScript 实现 图 像 特 效 


15.5.1 “实例 概述 


本 实例 的 基本 功能 是 , 通过 JavaScript 技术 将 指定 的 三 幅 素材 图 片 在 页 面 中 渐 显 播放 。 本 
实例 的 实现 文件 如 下 。 

O 文件 1.html: 调用 JavaScript 样式 设置 。 

O 文件 1.js: 通过 JavaScript 设置 图 像 的 显示 样式 。 

其 中 文件 1js 的 具体 操作 流程 如 下 : C) 设置 图 像 的 路 径 
和 名 称 ; (2) 图 像 亮度 增加 处 理 ; (3) 图 像 亮 度 减 小 处 理 。 上 
述 操作 的 运行 流程 如 图 15-14 所 示 。 


度 增加 处 理 


度 减 小 处 理 


图 15-14 ”实例 运行 流程 图 
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15.5.2 


设置 图 像 属 性 


设 


I 


图 像 属 性 的 功能 是 指定 在 页 面 
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像 的 特效 处 理 ， 分 别 是 Ljpg. 2jpg 和 3.jpg。 其 具体 实现 代码 如 下 。 


15.5.3 


sandra0 = new Image(); 
sandra0.src = "1.jpg"; 
sandral = new Image(); 
sandral.src = "2.jpg"; 
sandra2 = new Image(); 
sandra2.src — "3.jpg"; 
vari strngth=1 

vari image=0 

var imageurl = new Array() 
imageurl[0] ="1.jpg" 
imageurl[1] ="2.jpg" 
imageurl[2] ="3.jpgp" 


亮度 增加 处 理 


亮度 增加 处 理 的 功 


Ab E, 


使 页 面 内 的 指定 图 


H5 XE 


showimage0 实 现 的 ， 其 具体 实现 代码 如 下 。 


0>"; 


function showimage() { 
if(document.all) { 
if (i strngth <=110) í 


/ 设置 图 片 1 名 称 


/ 设置 图 片 1 名 称 


/ 设置 图 片 1 名 称 


// 设置 图 
// 设置 图 
/ 设置 图 


片 1 路 径 
片 1 路 径 
片 1 路 径 


EM 
[=i 


式 


= 


T 


片 以 亮度 渐 增 的 村 


Ju 


/ 亮度 小 于 等 于 110 则 渐 亮 显示 


渐 显 播放 图 片 的 路 径 和 名 称 。 本 实例 实现 了 三 幅 图 


mm.innerHTML="<img style='filter:alpha(opacity="+i strngth+") src="+imageurl[i image]+" border= 


1 strngth=i strngth+10 

var timer-setTimeout("showimage()",100) 
j 

else ( 

clearTimeout(timer) 

var timer-setTimeout("hideimage()",1000) 
} 

j 


if(document.layers) í 


clearTimeout(timer) 


/ 设置 时 间 频 率 


// 否则 调 


] 亮 度 减 小 函数 


document.mm.document.write("<img src="+imageurl[i imagel+" border=0>") 


document.close() 

i imagett+ 

if (1 image >= imageurl.length) {i image=0} 
var timer-setTimeout("showimage()",2000) 


j 
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15.5.4 


cm 


亮度 减 小 处 理 


亮度 减 小 处 理 的 功能 是 使 页 面 内 的 指定 图 片 以 亮度 减 小 的 样式 显示 。 该 功能 是 由 函数 
hideimage0 实 现 的 ， 其 具体 实现 代码 如 下 。 


0>"; 


function hideimage() í 
if (i stmgth >=-10) í / 亮度 值 大 于 或 等 于 -10， 则 减 亮度 显示 
mm.innerHTML="<img style='filter:alpha(opacity="+i strngth+") src-"--imageurl[i image]+" border= 


i strngth=1 strngth-10 

var timer-setTimeout("hideimage()",100) / WERAK 
} 

else { // 亮度 值 不 大 于 或 等 于 


clearTimeout(timer) 


T 

l 
= 
© 


1 image++ 
if (i image >= imageurl.length) {i image=0} 
i stmgth-1 


P 
E 


var timer-setTimeout("showimage()",500) / 输出 图 像 


j 
j 


= 
m 


文件 1.html 通过 调用 脚本 代码 实现 图 像 特 效 显示 的 最 终 效果 ， 其 实现 代码 如 下 。 


«html xmlns="http://www.w3.org/1999/xhtml"> 
«style type="text/css"> 
«i 
body í 
background-color: 49966FF; FREH REGI 


j 


T 

</style> 

</head> 

<script language=javaScript src-" 1 .js"></script> 

<body onLoad="showimage()"> 

<div id="mm" style="position:absolute;visibility:visible;top: 10px;left:240px"></div> 
</body> 


</html> 


经 过 上 述 操作 流程 后 ， 整 个 实例 文件 设计 完毕 ， 其 详细 代码 读者 可 以 参阅 本 书 光盘 中 的 


对 应 文人 


F。 实 例文 件 的 最 终 显示 效果 分 别 显示 指定 的 三 幅 图 像 ， 如 图 15-15 一 图 15-17 Bron. 


并 有 旦 上述 三 幅 图 像 是 以 亮度 渐变 样式 显示 的 。 
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图 15-15 
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显示 效果 图 


图 15-16 


图 15-17 


显示 效果 图 


显示 效果 图 


C 
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15.6 AROE 


在 Web 页 面 设计 过 程 中 ， 通 常 为 满足 特殊 需要 而 对 页 面 背景 进行 修饰 。 接 下 来 将 通过 一 


个 轮换 背景 模块 实例 的 实现 过 程 ， 向 读者 讲解 JavaScript 处 理 背景 的 方法 。 


实例 15-4 说 
源码 路 径 daimaN1S\ 背 景 \1.html 
功能 JavaScript 实现 背景 特效 


本 实例 的 基本 功能 是 , 通过 JavaScript 技术 获取 指定 显示 的 三 幅 背景 图 像 ， 然 后 在 页 面 打 


(OD 指定 三 幅 背 景 图 像 的 路 径 。 
(2) 通过 JavaScript 实现 对 指定 图 像 的 调 
文件 1.html 的 主要 实现 代码 如 下 。 


[mun 


o 


«html xmins-"http://www.w3.org/1999/xhtml"7 
«style type="text/css"> 
<= 
body í 
background-color: #9966FF; 
} 
> 
</style> 
«script LANGUAGE="JavaScript"> 
bg = new Array(2); // 设 定 


开 后 随机 的 显示 出 来 。 本 实例 实现 文件 Lhtml 的 设计 流程 如 下 。 


图 像 数 为 3 


bg[0] = '1.jpg' /分 别 设置 图 像 路 径 


bg[1] ='2.jpg' 

bg[2] = '3.jpg' 

index = Math.floor(Math.random() * bg.length); 
document.write("<BODY BACKGROUND="+bg[index|+">"); 
</script> 

</head> 

<body> 

</body> 

</html> 


执行 后 的 效果 如 图 15-18 所 示 。 
当 刷 新 上 述 页 面 后 会 显示 不 同 的 页 面 背 


p 


o 
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图 15-18 ”显示 效果 图 


15.7 ”鼠标 处 理 


在 页 面 设 计 过 程 中 ， 通 常 需要 对 鼠标 进行 修饰 ， 实 现 特殊 的 显示 效果 。 而 经 过 JavaScript 
技术 处 理 后 ， 可 以 实现 CSS 不 能 达到 的 效果 。 接 下 来 将 通过 一 个 鼠标 特效 处 理 模块 实例 的 实 
现 过 程 ， 向 读者 讲解 用 JavaScript 实现 鼠标 特效 的 方法 。 


实例 15-5 说 W 
源码 路 径 daimaM 5M Ej M html 
功能 JavaScript 实现 鼠标 特效 


15.7.1 ”实例 概述 
本 实例 的 基本 功能 是 , 通过 JavaScript 技术 将 指定 文本 在 页 面 范围 内 跟随 鼠标 的 移动 而 移 
动 。 文 件 1.html 的 具体 实现 流程 如 下 。 
(1) 设置 跟随 鼠标 的 文本 。 
(2) 文本 效果 处 理 。 
(3) 页 面 调用 显示 。 


15.7.2 ”指定 跟随 文本 
指定 跟随 文本 的 功能 是 设置 在 页 面 中 跟随 鼠标 的 文本 内 容 ， 并 对 字符 文本 的 空格 进行 了 
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过 滤 处 理 。 该 功能 的 具体 实现 代码 如 下 。 


15.7.3 


var x,y 
var step-20 
var flag-0 


var message=" 这 一 生 我 跟 定 你 了 ! 1n 


文本 效果 处 理 


/文本 内 容 


文本 效果 处 理 功 能 是 设置 在 页 面 中 跟随 鼠标 文本 的 显示 样式 。 该 功能 主要 是 通过 函数 
handlerMM() 和 makesnake0 实 现 的 。 其 具体 实现 代码 如 下 。 


字符 “历史 
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var xpos=new Array() 

for (i=0;1<=message.length-1;i++) í 
xpos[i]=-50} 

var ypos=new Array() 

for (i=0;1<=message.length-1;i++) í 
ypos[i]=-50} 

function handlerMM(e)í 


x = (document.layers) ? e.pageX : document.body.scrollLeftrevent.clientX /水 平 位 置 
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY //3E HM E: 


flag-1) 

function makesnake() í 

if (flag==1 && document.all) í 

for (i-message.length-1; i»—1; 1--) { 
xpos[i]-xpos[1-1 ]step 

已 ”水 平 坐标 +step 间隔 


ypos[i]-ypos[i-1] } 

xpos[0]=x+step 

ypos[0]=y 

for (i=0; i<message.length-1; it) í 
var thisspan = eval("span"--(1)-".style") 
thisspan.posLeft=xpos[i] 
thisspan.posTop=ypos[i] } } 

else if (flag-—1 && document.layers) í 
for (i-message.length-1; i»—1; i--) í 
xpos[i]-xpos[1-1 ]-step 
ypos[i]-ypos[i-1] } 

xpos[0]-x-'step 

ypos[0]-y 

for (1-0; i«message.length-1; i++) í 
var thisspan = eval("document.span'-) 
thisspan.left-xpos[i] 
thisspan.top-ypos[i]) } 


/设置 30ms 的 定时 器 来 连续 调用 makesnake0, 时 刻 刷新 显示 字符 串 的 位 置 
var timer-setTimeout("makesnake()",30)) 


/定义 数组 
/变量 递增 1 


/动态 生成 span 字符 标记 


/从 事件 得 到 鼠标 位 置 


LA 


/ 重 定位 每 个 字符 的 位 置 
/如 果 是 IE 


// 从 尾 向 头 确定 字符 的 位 置 ， 每 个 字符 为 前 一 个 


/后 一 个 字符 跟踪 前 一 个 字符 运动 
/第 一 个 字符 坐标 紧 跟 鼠标 光标 


/用 eval 根据 字符 串 得 到 该 字符 串 表 示 的 对 象 


/如 果 值 为 1 


/水 平 递减 移动 
/垂直 递减 移动 


/输出 对 应 值 


= 
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15.7.4 页面 显示 


页 面 显 示 功 能 是 通过 “document write” 在 页 面 中 输出 实现 的 ， 其 具体 实现 代码 如 下 。 


<script> 

for (i-0;i«—message.length- 171-7) í 

document.write(" «span id-'span'--i*"class-'spanstyle") // 输 出 调用 样式 标记 
document.write(message[i]) 


document.write("«/span»")Y // 输 出 调用 样式 标记 
if (document.layers){ 

document.captureEvents(Event.MOUSEMOVE);} 

document.onmousemove = handlerMM; /鼠标 特效 样式 
</script> 


经 过 上 述 操作 流程 后 ， 整 个 实例 文件 设计 完毕 ， 其 详细 代码 读者 可 以 参阅 本 书 光 盘 中 的 
对 应 文件 。 实 例文 件 的 最 终 显示 效果 分 别 如 网 15-19, EJ 15-20 所 示 。 


FELICES 


€ Jail 2 


|Ë] E: vB ante dins LT MR 


图 15-19 ”显示 效果 图 图 15-20 ”鼠标 移动 后 的 效果 


15.8 ”菜单 处 理 


在 页 面 设 计 过 程 中 ， 通 常 需要 对 菜单 元 素 进行 修饰 ， 以 实现 特殊 的 显示 效果 。 而 通过 
JavaScript 技术 对 菜单 进行 处 理 后 , 可 以 实现 CSS 不 能 达到 的 效果 。 接 下 来 将 通过 一 个 菜单 处 
理 实例 模块 的 实现 过 程 ， 向 用 户 讲解 使 用 JavaScript 实现 菜单 特效 的 方法 。 


实例 15-6 说 HJ 
源码 路 径 daimaM 5G ML. html 
功能 JavaScript 实现 菜单 特效 
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15.8.1 ”实例 概述 
本 实例 的 基本 功能 是 , 通过 JavaScript 技术 将 指定 文本 在 页 面 范 围 内 跟随 鼠标 的 移动 而 移 
动 。 文 件 1.html 的 具体 实现 流程 如 下 。 
(1) 设置 菜单 的 内 容 和 对 应 链接 的 内 容 。 
(2) 设置 滚动 区 域 的 属性 。 
(3) 循环 输出 菜单 。 


15.8.2 ”设置 菜单 元 素 内 容 


POETE s D PD s 该 功能 是 分 别 通 
过 数组 link 和 text 实现 的 ， 其 具体 实现 代码 如 下 。 


var index = 7 

link = new Array(6); 

text = new Array(6); 
[0] ='sample.htm' /设置 各 菜单 目标 链接 
[1] ='sample.htm' 

link[2] ='sample.htm' 

ink[3] —sample.htm' 

link[4] ='sample.htm' 

ink[5] -sample.htm' 

link[6] ='sample.htm' 


link| 
link| 


= 


= 


text[0] = 菜单 一 /设置 各 菜单 显示 文本 
text[1] 二 菜单 一 ' 
text[2] =' 菜 单一 
text[3] =' 菜 单一 ' 
text[4] =' 菜 单一 ' 
text[5] =' 菜 单一 ' 
text[6] 单一 ' 


15.8.3 ”设置 深 动 区 域 属性 


滚动 区 域 属性 的 功能 是 ， 指 定 菜 单元 素 所 属 区 域 的 深 动 属性 。 该 功能 是 通过 标记 
<marquee> 实 现 的 ， 其 具体 实现 代码 如 下 。 


document.write ("«marquee scrollamount= 1 scrolldelay='100' direction- up' width-150' height= '150'>"); 
for (i=0;i<index;i++){ 

document.write ("&nbsp;«img src-'img/little.gif width-12' height= 12'> «a href="+link[i|T"target=' blank >"); 
document.write (text[1] + "</A><br>"); 

j 


document.write ("</marquee>") 


上 述 实例 代码 的 执行 效果 如 图 15721 所 示 。 
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图 15-21 显示 效果 图 


上 述 菜单 列表 是 按照 指定 属性 逐渐 向 上 滚动 显示 的 。 
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在 HTML5 中 ， 专 门 提 供 了 可 供 页 面 层 调用 的 API 文件 ， 通 过 API 文件 中 的 对 象 、 方 法 


第 16 革 文件 操作 实战 


和 接口 


T 


， 可 以 很 方便 地 访问 文件 的 属性 或 读 取 文 件 内 容 。 


本 章 将 详细 介绍 在 HTML 页 面 中 ， 


使 用 “file” 类 型 的 <input> 元 素 访问 或 操纵 本 地 文件 的 方法 ， 并 通过 几 个 实例 来 演示 文件 操作 
的 具体 流程 。 
16.1 选择 一 个 上 传 文件 
在 HTML 5 中 ， 可 以 使 用 “file” 类 型 的 <input> 元 素 实现 文件 的 上 传 功能 。 在 HTML 5 
元 素 中 ， 在 该 类 型 的 <input> 元 素 中 新 添加 了 一 个 “multiple” 属 性 ， 如 果 将 属性 的 值 设 置 为 
“true”, 就 可 以 在 一 个 元 素 中 实现 多 个 文件 的 上 传 。 另 外 ， 通 过 访问 Blob 对 象 ， 可 以 获取 上 
传 文 件 的 类 型 和 大 小 属性 。 
实例 16-1 说 明 
源码 路 径 daima\16\16-1\ 
功能 选择 一 个 上 传 文件 


在 本 实例 中 ， 当 创建 一 个 “file” 类 型 的 <input> 元 素 上 传 文件 时 ， 该 元 素 在 页 面 中 的 展示 


方式 发 生 了 变化 ， 不 再 显示 一 个 文本 框 ， 而 是 使 用 一 个 “选择 文件 ”的 按钮 ， 按 钮 的 右 侧 显 


示 选 择 上 传 文件 的 名 称 。 当 初始 化 页 面 时 没有 上 传 文件 ， 就 会 显示 “未 选择 文件 ”字样 。 实 


例文 件 


1.html 的 具体 实现 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 单 个 上 传 文件 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
«form id="frmTmp"> 
<fieldset> 
<legend> 上 传 一 个 文件 : </legend> 
<input type="file" name="fleUpload" id="fleUpload" /> 
</fieldset> 
</form> 
</body> 
</html> 


执行 上 述 代 码 后 ， 如 果 单 击 该 元 素 的 “选择 文件 ”按钮 ， 可 以 选择 一 个 图 片 文件 。 单 


“打开 ”按钮 或 双击 该 文件 后 ， 在 “选择 文件 ”按钮 


明 已 将 该 文件 选中 ， 正 在 等 待 上 传 。 


P 


EF 式 文件 css.css 的 代码 如 下 。 


(Q)charset "utf-8"; 

/* CSS Document */ 

body í 
font-size:12px 

} 

.inputbtn í 
border:solid 1px #ccc; 
background-color:#eee; 
line-height:18px; 
font-size:12px 

j 

.Inputtxt í 
border:solid 1px #ccc; 
padding:3px; 
line-height:18px; 
font-size:12px; 
width:160px 

j 

fieldset( 
padding: 1 0px; 
width:285px; 
float:left 

} 

/* 实例 3 增加 样式 */ 

ulí 

list-style-type:none; 


padding:Opx; 

margin:10px Opx Opx Opx; 
width:290px 

j 

ul lif 
border-bottom:dashed #ccc 1px; 
padding-top:5px; 
padding-bottom:5px; 
clear:both; 
float:left 

j 

ul li spaní 
float:left; 
width:92px; 
padding-left:3px 
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的 右 侧 ， 如 果 显 示 该 图 片 文件 的 名 称 ， 


EN 403 


& HTML 5 开发 从 入 门 到 精通 


执行 效果 如 图 16-1 所 示 。 


图 16-1 执行 效果 
404 mau 
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162 ”选择 多 个 上 传 文件 


在 HTML 5S 中 ， 除 了 可 以 选择 单个 文件 外 ， 还 可 以 使 用 元 素 的 “mnultiple” 属 性 将 该 属性 
值 设 为 “true”， 这样 可 以 实现 选择 多 个 文件 的 功能 。 一 个 文件 对 应 一 个 “fde” 对 和 象 ， 该 对 象 
中 有 如 下 两 个 重要 的 属性 : 


口 name: 表示 不 包含 路 径 的 文件 名 称 。 

口 lastModifiedDate: 表示 文件 最 后 修改 的 时 间 。 

当 使 用 “file” 类 型 的 <input> 元 素 选 择 多 个 文件 时 ， 该 元 素 ! 
从 而 形成 了 “FileList” 对 象 〈 即 “file” 对 象 ) 的 列表 。 


就 含有 多 个 


“file” 对 象 ， 


实例 16-2 


说 HJ 


源码 路 径 daima\16\16-2\ 


功能 


力 能 选择 多 个 上 传 文件 


在 本 实例 的 3 


F PE 
R 


=> 


“multiple” J 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 选 择 多 个 文件 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<form id="frmTmp"> 
<fieldset> 
<legend> 选 择 多 个 文件 : </legend> 
«input type-"file" name-"fleUpload" id="fleUpload" multiple="true"/> 
«/fieldset^ 
</form> 
</body> 
</html> 


在 上 述 代 码 中 ， 因 为 “file” 类 型 的 <inpu 亿 元 素 中 添加 了 “multiple” 
过 该 元 素 选择 多 个 文件 。 选 择 成 功 后 ,“ 选 择 文件 ”按钮 右 侧 不 
成 功 选择 文件 的 总 量 ， 当 将 
选中 时 ， 在 上 传 文件 元 素 ， 


gt 


鼠标 移 至 总 量 时 ， 显 示 全 部 上 传 文件 的 详细 列表 。 
， 将 会 产生 一 个 “FileList” 对 象 ， 用 来 装载 各 文 从 


面 中 ， 首 先 创 建 一 个 “fle” 类 型 的 <inpu 亿 元素， 然后 为 
属性 的 值 设置 为 “true”。 实 例文 件 2.html 的 实现 代码 如 下 。 


E， 所 以 可 以 通 
再 显示 文件 的 名 称 ， 而 是 显示 


其 添加 了 


当 多 个 文件 被 


如 文件 名 称 、 类 型 、 
息 并 展示 在 页 面 中 。 
当 单 击 “ 选 择 文人 


F” 时 ， 可 以 同时 选择 3 个 文人 


EF。 如 图 16-2 所 示 。 


F 的 基本 信息 ， 


大 小 等 ， 在 上 传 文件 总 量 的 文字 上 移动 鼠标 时 ， 将 调用 该 对 象 的 列表 信 
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A A | 
€ `C Otea I S 2x 


default apps 


yet | cxi 7] maa e 
| icudt. dll 
(S)1ibegl. ani 
(S)1ibelesv2. dl1 

naclB4. exe 

El nacl irt x86 32.nexe 
E) nacl_irt_x86_64. nexe 
(S) npchrone, £rane. dll 
(55) chrone, frame helper. dl! (8) pa£. dl 


chrome_frame_helper. ex 


ES 查找 范围 CD: [E 19.0. 1084.41 司 Oem 


Extensions 
Recent 


桌面 


描述 : Chrome Frame renders the Web of the future i: 
of the past. It's like strapping a rocket engine t 
公司 : Google Inc. 


chrome launcher. exe 
d3dcompiler 43. dll 
(5) a3ax9 43. 11 文件 版 本 : 19.0.1084. 41 
加 所 sshplayer app. exe 创建 日 期 : 2012-5-25 12:08 
le) flashplayercplapp. cpl 大 小 : 61.9 KB 


文件 名 QD: "avutil-51. dll" "avcodec-54. dll" “avf Y iT 0) 
文件 类 型 @@): — [所 有 文件 z] 取消 | 


图 16-2 ”同时 选择 3 个 文件 


单 击 “ 打 开 ” 按 钮 后 ， 在 “选择 文件 ”按钮 的 右 侧 将 显示 “3 个 文件 ”的 字样 。 移 动 鼠 
标 至 文字 上 时 ， 显 示 这 3 个 文件 的 详细 名 称 与 类 型 。 如 图 16-3 所 示 。 


ame] : 


选择 文件 |3 Wa 


avutil-51. dl 


avcodec-54. dll 
avformat-54. dll 


图 16-3” 列 出 了 选择 的 3 个 文件 


163 ”获取 文件 的 类 型 和 和 大 小 


1E HTML 5 中 ,可 以 使 用 Blob 接口 获取 某 个 文件 的 类 型 和 大 小 ,Blob 表示 二 进 制 数 据 块 ， 
在 此 接口 中 提供 了 一 个 名 为 slice 方法 ， 通 过 该 方法 可 以 访问 指定 长 度 与 类 型 的 字 节 内 部 数据 
块 。 该 接口 提供 了 如 下 两 个 属性 : 

口 size: 表示 返回 数据 块 的 大 小 。 

口 type: 表示 返回 数据 块 的 MIME 类 型 ， 如 果 不 能 确定 数据 块 的 类 型 ， 则 返回 一 个 空 字 


符 串 。 
由 此 可 见 ， 实 质 上 是 Blob 接口 的 一 个 实体 ， 完 全 继承 了 该 接口 中 的 方法 与 属性 。 
实例 16-3 说 9 
源码 路 径 daima\16\16-3\ 
功能 获取 文件 的 类 型 和 大 小 
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I 
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实例 文件 3.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title> 获 取 上 传 文件 的 类 型 和 大 小 </title> 

<link href="css.css" rel="stylesheet" type="text/css"> 
«script type="text/javascript" language-"jscript" 


src-"js3.js"/7 
</script> 
</head> 
<body> 
«form id="frmTmp"> 
<fieldset> 
<legend> 可 以 同时 上 传 多 个 文件 : </legend> 
«input type-"file" name="fleUpload" id="fleUpload" 
onChange-"fileUpload GetFileList(this.files);" 
multiple-"true"/^ 
«ul id="ulUpload"></ul> 
</fieldset> 
</form> 
</body> 


</html> 


pui 


在 上 述 代码 中 ， 当 “file” 类 型 的 <input> 元 素 选 择 上 传 文件 时 ， 将 触发 “onChange” 导 
fE. 在 该 事件 中 , 调用 自 定 义 的 函数 fileUpload GetFileList(this.files), 其 中 , 9:2 “this. files” 
表示 所 选择 的 上 传 文件 集合 ， 即 FileList 对 象 。 在 函数 fileUpload GetFileListO 中 ,遍历 传 回 
的 FileList 文件 集合 ， 获 取 单 个 的 “file” 对 象 。 该 对 象 通过 继承 Blob 接口 的 属性 ， 返 回 文 
件 的 名 称 、 类 型 、 大 小 信息 ， 并 将 这 些 信 息 以 登 加 的 方式 保存 在 变量 “strLi” 中 ; 最 后 将 变 
量 的 内 容 赋值 给 ID 号 为 “uIUpload” 的 列表 元 素 ， 通 过 该 元 素 ， 将 上 传 文件 的 信息 展示 在 
页 面 中 。 
函数 fileUpload”GetFileList(this.files) 是 在 文件 js3.js 中 定义 的 ， 此 文件 的 代码 如 下 。 


` 


// JavaScript Document 

function $$(id) í 
return document.getElementById(id); 

j 

/选择 上 传 文件 时 调用 的 函数 

function fileUpload GetFileList(f) í 
var strLi = "<li class-'li'7"; 
strLi = strLi + "<span> 文 件 名 称 </span>"; 
strLi = strLi + "<span> 文 件 类 型 </Span>"; 
strLi = strLi + "<span> 文 件 大 小 </span>"; 
strLi = strLi + "</li>"; 
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for (var intl = 0; intl <f.length; int) í 
var tmpFile = f[intl]; 
strLi = strLi + "<li>"; 
strLi = strLi + "<span>" + tmpFile.name + "</span>"; 
strLi = strLi + "<span>" + tmpFile.type + "</span>"; 
strLi = strLi + "<span>" + tmpFile.size + " KB</span>"; 
strLi = StrLi + "</li>"; 


J 
$$("ulUpload").innerHTML = strLi; 
J 
单 击 “ 选 择 文件 ”按钮 ， 可 以 选取 多 个 需要 上 传 的 文件 。 如 图 16-4 所 示 。 
三 可 以 同时 上 传 多 个 文件 : 


选择 文件 | 未 选择 文件 | 


查找 范围 [I): |C 19.0.1084. 41 


(8) i cua. a11 
Installer (S)1ibegi. a1 

Locales (S)1ibelesv2. a11 

(8) avcodec-54. dll []naci84. exe 

(s) avformat-54. dll 回 nacl irt x85 32.nexe 
= nacl_irt_x86_64. nexe 
[S) npehrone, frane. 411 


Recent 


(8) chrome. a11 


(s) chrome frame helper. dll (3) pdf. dll 

chrome frame helper. exe E) plugin. vch 

chrome launcher. exe (S) »peoogl enaclpluginchrone. dll 
(8) d3áconpiler 43. dl resources. pak 
(5) d3ax9_43. a11 (S) xinputi 3. a11 


flashplayerapp. exe 
lE] flashplayercplapp. cpl 


waw: — [eus 了 | 
交 件 类 型 中): — [所 有 文件 z] 取消 


图 16-4 ”同时 选择 多 个 文件 
选择 多 个 文件 后 ， 将 在 页 面 中 以 列表 的 方式 展示 所 选 文件 的 名 称 、 类 型 、 大 小 信息 。 如 
16-5 所 示 。 


可 以 同时 上 传 多 个 文件 : 
选择 文件 | 3 个 文件 


文件 名 称 文件 类 型 文件 大 小 


avformat-54. dll application/x- 250368 KB 
msdownload 


avutil-51. dll  application/x- 134656 KB 
msdownload 


chrome. dll application/x- 35872240 KB 
msdownload 


VR] 


16-5 执行 效果 
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16.4 ”过 渡 出 非 图 片 格式 的 文件 


在 前 面 的 实例 16-3 中 ， 通 过 “file” 对 象 可 以 获取 每 个 上 传 文件 的 名 称 、 类 型 、 大 小 ， 
基于 此 可 以 过 滤 上 传 文件 的 类 型 。 具 体 做 法 是 : 当选 择 上 传 文件 后 ， 遍 历 每 一 个 “file” 对 
象 ， 获 取 该 对 象 的 类 型 ， 并 将 该 类 型 与 设置 的 过 滤 类 型 进行 匹配 ， 如 果 不 符合 则 输出 “上 
传 文件 类 型 出 错 ” 或 “拒绝 上 传 ”之 类 的 提示 ， 从 而 实现 在 选择 文件 时 过 滤 掉 不 需要 上 传 
的 文件 。 


实例 16-4 说 明 
源码 路 径 daima\16\16-4\ 
功能 过 滤 出 非 图 片 格 式 的 文件 


在 本 实例 的 页 面 表单 中 ， 首 先 创建 了 一 个 “file” 类 型 的 <input> 元 素 ， 并 设置 “multiple” 
属性 为 “true”， 用 于 选择 多 个 文件 。 当 单 击 “ 选 择 文件 ”按钮 并 选取 了 需要 上 传 的 文件 后 ， 
如 果 选取 的 文件 中 存在 不 符合 “图 片 ”类 型 的 文件 ， 则 在 页 面 中 显示 此 类 型 文件 的 总 数量 和 
文件 名 称 。 实 例文 件 4html 的 实现 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title> 过 滤 上 传 文件 的 类 型 </title> 

<link href="css.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" language="jscript" 


sre="js4.js"/> 
</script> 
</head> 
<body> 
<form id="frmTmp"> 
<fieldset> 
<legend> 上传 过 滤 类 型 后 的 文件 ，</legend> 
<input type="file" name="fleUpload" id="fleUpload" 
onChange-"fileUpload CheckType(this.files);" 
multiple="true" /> 
<p id="pTip"/> 
</fieldset> 
</form> 
</body> 


</html> 


在 上 述 代 码 中 ， 如 果 上 传 文件 是 图 片 类 型 ， 则 “file” 对 象 返回 的 类 型 都 以 “image/” 开 
涉 ， 并 在 后 面 添 加 “*” 表 示 所 有 的 图 片 类 型 ， 或 添加 “gif” 表 示 菜 种 类 型 图 片 。 所 以 如 果 是 
一 个 图 片 文 件 ， 该 文件 返回 的 类 型 必定 以 “image/” 字 样 开 头 。 


LH 
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JavaScript 文件 js4.js 的 主要 代码 如 下 所 示 。 


// JavaScript Document 
function $$(id) í 
return document.getElementBylId(id); 
} 
// 选 择 上 传 文件 时 调用 的 函数 
function fileUpload CheckType(f) { 


= tt 
^ 


var strP 
strN = "", 
intJ = 0; 
var strFileType — /image.*/; 
for (var intl = 0; intl < f.length; intl-+) í 
var tmpFile = f[intl]; 
if (!tmpFile.type.match(strFileType)) í 
intJ = intJ + 1; 
StrN = strN  tmpFile.name + "<br>"; 
j 
j 
strP = "检测 到 ("+intJ+") 个 非 图 片 格式 文件 。"; 
if (intJ > 0) í 
strP = strP + "文件 名 如 下 : <p>" + strN + "</p>"; 


} 
$$("pTip").innerHTML = strP; 


} 


当 本 实例 遍历 传 回 的 文件 集合 时 , 通过 上 述 代码 中 的 方法 match0 检 测 每 个 文件 返回 的 类 


型 中 是 否 含有 “image/*” 字 样 。 如 果 没 有 则 说 明 是 非 图 片 类 型 文件 ， 分 别 将 文 们 


名 称 以 琶 加 的 形式 保存 在 变量 中 ;然后 将 变量 的 内 容 赋值 给 ID 号 为 <pTip> 的 元 素 ; 最 后 ， 通 


过 该 元 素 显示 全 部 过 滤 文 件 的 总 量 与 名 称 表 。 执 行 后 的 效果 如 图 16-6 所 示 。 


上 传 过 滤 类 型 后 的 文件 : 


选择 文件 | flashplayerapp.exe 
检测 到 (个 非 图 片 格式 文件 。 文 件 名 如 下 : 


flashplayerapp. exe 


图 16-6 执行 效果 


16.5 ”过滤 上 传 文件 的 类 型 


前 面 已 经 讲解 了 与 文件 上 传 操作 相关 的 几 个 实例 ,读者 可 试想 一 下 : 在 选择 


F 总 量 与 文件 


上 传 文件 后 ， 


410 EE 


如 果 能 根据 文件 返 


少 代码 。 


型 


设 


En — (4 


Exi 13 


型 。 


加 的 类 型 过 滤 所 选择 上 
fE HTML 5 中 ， 可 以 设置 “file” 
属性 值 后 ， 在 打 


开 窗 口 


完 “accept” 


实例 16-5 
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的 文件 ， 则 是 一 种 非常 实用 的 方法 ， 但 是 需要 编写 不 
类 型 <input> 元 素 的 “accept?” 


选择 文件 时 ， 默 认 的 文件 类 型 就 是 所 设置 的 过 滤 


属性 为 文件 的 过 


滤 类 


~ 


说 HJ 


源码 路 径 


daima\16\16-5\ 


功能 


的 类 型 。 


“accept” 


的 文件 选择 窗口 中 


下 所 示 。 


E: 


T 


在 


体 实现 上 ， 


性 ， 将 属性 


I 


LJ “image/gif”, ` 


值 设 


E 


例 的 功能 是 ， 将 “file” 类 型 的 <input> 元 素 通 


过 滤 上 传 文件 的 类 型 


过 “accept” 属 性 来 过 滤 选 择 文件 


先 创 建 一 个 “file” 类 型 的 <input> 元 素 ， 并 在 元 素 中 添加 一 个 


用 户 单 击 “ 选 择 文件 ”按钮 时 ， 在 打开 


<!DOCTYPE html> 
<html> 
<head> 
«meta charset-"utf-8" /> 
<title> 使 用 accept 属性 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<form id="frmTmp"> 
<fieldset> 
<legend> 选 择 上 传 文件 : «legend 
«input type-"file" name-"fleUpload" 


id-"fleUpload" accept-"image/gif" /> 
«/fieldset^ 


使 用 “accept” 作 为 默认 的 文件 类 型 。 


实例 文件 S.html 的 实现 代码 如 


</form> 

</body> 

</html> 
在 上 述 代 码 中 ， 因 为 对 文件 元 素 添 加 了 “accept” 属 性 ， 并 将 “image/gif” 类 型 作为 该 属 
性 的 值 , 所 以 当 单 击 “ 选 择 文件 ”按钮 打开 窗口 时 , 其 默认 的 选择 文件 类 型 就 是 所 设置 “accept” 
属性 值 。 由 此 可 见 ， 通 过 设置 元 素 的 一 个 属性 即 可 在 文件 选择 前 过 滤 所 选 文件 的 类 型 。 虽 然 
这 种 方法 的 代码 简单 ， 但 是 在 目前 的 浏览 器 中 不 是 很 有 效 。 原 因 是 即便 通过 属性 设置 了 文件 
选择 的 类 型 ， 但 不 是 该 类 型 的 文件 同样 也 可 以 被 选中 ， 也 能 被 文件 元 素 所 接受 。 执 行 后 的 效 


果 如 图 16-7 所 示 。 
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图 16-7 执行 效果 


16.6 ”预览 上 传 的 图 片 


fr HTML 5 中， 通过 


过 FileReader 接口 不 仅 可 以 读 取 图 片 文件 ， 还 可 以 读 取 文本 或 二 进 


制 文件 ， 并 且 能 够 根据 该 接口 提供 的 事件 与 方法 动态 侦察 文件 读 取 时 的 详细 状态 。 接 口 
FileReader 为 用 户 提供 了 一 个 异步 API， 通 过 这 个 API 可 以 从 浏览 器 主线 程 中 异步 访问 文 


件 系统 中 的 数据 。 正 是 


因为 如 此 ，FileReader 接口 可 以 读 取 文件 中 的 数据 ， 并 将 读 取 的 数 


据 放 入 内 存 中 。 当 访问 不 同文 件 时 ， 必 须 重 新 调用 FileReader 接口 的 构造 函数 。 因 为 每 调 
用 一 次 ， 接 口 FileReader 都 将 返回 一 个 新 的 FileReader 对 象 ， 只 有 这 样 才能 实现 访问 不 同 
文件 的 数据 。 在 接口 FileReader 中 有 许多 用 于 读 取 文件 或 响应 事件 的 方法 ， 例 如 触发 
onabort 事件 时 需要 调用 abort() 方 法 ,接口 FileReader 中 的 常用 方法 的 说 明 如 表 16-1 所 示 。 


表 16-1 接口 FileReader 中 的 常用 方法 


& 称 5 * 功 能 说 MJ 
huaman " 六 二 进 制 的 方式 读 | ”调用 该 方法 时 ， 将 fle oM SORTEO, NA 
K s 取 文件 内 容 个 一 进 制 字符 串 的 形式 ， 分 据 读 入 内 存 中 
六 数组 缓冲 的 方式 | 调用 该 方法 时 , 将 fle 对象 返 回 的 数据 字 节 数 ， 以 
DUM fe o | 读 取 文件 内 容 数组 缓冲 的 方式 读 入 内 存 中 
as oe poe | 调用 该 方法 时 ， 将 fle 对 象 返回 的 数据 块 ， 以 一 
readAsDataURLO 加 | RL IA | 于 数据 URL 字符 的 形式 展示 在 页 面 中 ,这 种 方法 一 
G 般 读 取 数据 块 较 小 的 文件 
das T Bh e 调用 该 方法 时 ， 其 中 encoding 参数 表示 文本 文件 
readAsText() file,encoding 法 了 bel 的 方式 编码 的 方式 ， 默 认 值 为 utf-8， 即 以 utf8 编码 格式 
i SEAR REA NER 
m" " UR. P URTEREN GER 
IMRAN RATTE, RARE GA 
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实例 16-6 说 HJ 
源码 路 径 daima\16\16-6\ 
功能 预览 上 传 的 图 片 


在 本 实例 中 , 使 用 fileReader 接口 中 的 方法 pp rie API 异步 读 取 的 文件 数 
据 ， 然 后 另存 为 数据 URL 格式 ， 并 将 该 URL 绑 定 <img> 元 素 的 “src” 属 性 值 ， 这 样 就 可 以 
实现 图 片 文件 预览 的 效果 。 实 例文 件 6.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title> 预 览 图 片 </title> 

<link href="css.css" rel="stylesheet" type="text/css"> 

<script type="text/javascript" language="jscript" 
src="Js6.Js"/> 


</script> 
</head> 
<body> 
«form id="frmTmp"> 
<fieldset> 
<legend> fh WRIA: </legend> 
<input type="file" name="fleUpload" id="fleUpload" 
onChange="fileUpload PrevImageFile(this.files);" 
multiple="true"/> 
<ul id="ulUpload"></ul> 
</fieldset> 
</form> 
</body> 
</html> 


T 


在 上 述 代码 中 , ARRAPAR T —7 ^ file" KE «input*z6 38 HT E Ee SCA 
设置 属性 “multiple” 的 值 为 “true”， 这 表示 人 允许 选择 多 个 文件 。 单 击 “ 选 择 文件 ”按钮 后 ， 
如 果 选 择 的 是 图 片 文件 则 在 页 面 中 显示 。 
在 本 实例 中 ， 图 片 预览 的 过 程 实质 上 是 图 片 文件 被 读 取 后 展示 在 页 面 中 的 过 程 。 为 了 实 
现 这 一 过 程 ， 需要 引用 FileReader 接口 提供 的 读 取 文件 方法 readAsDataURLQ. 在 引用 接口 前 ， 
考虑 到 各 浏览 器 对 接口 的 兼容 性 不 一 样 , 首先 利用 JavaScript 代码 检测 用 户 的 浏览 器 是 否 支 持 
FileReader 对 象 ， 如 果 不 支 持 则 提示 出 错 信息 。JavaScript 文件 js6.js 的 主要 代码 如 下 。 


// JavaScript Document 
function $$(id) í 
return document.getElementById(id); 
j 
/选择 上 传 文件 时 调用 的 函数 
function fileUpload PrevImageFile(f) í 
/检测 浏览 器 是 否 文 持 FileReader XJ 
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1f (typeof FileReader == 'undefined') í 
alert(" 检 测 到 您 的 浏览 器 不 支持 FileReader 对 象 ! "); 
} 
var strHTML = ""; 
for (var intl = 0; intl < f.length; intH+) í 
var tmpFile = f[intl]; 
var reader = new FileReader(); 
reader.readAsDataURL(tmpFile); 
reader.onload = function(e) í 
strHTML = strHTML + "<span>"; 
strHTML = strHTML + "<img src=" + e.target.result + " alt="/>"; 
strHTML = strHTML + "</span>"; 
$$("ulUpload").innerHTML = "<li>" + strHTML + "</li>"; 


j 


` 


在 上 述 JavaScript 代码 中 ， 通 过 遍历 传 回 上 传 文件 集合 的 方式 获取 了 每 个 “file” 对 象 。 
内 为 每 个 文件 返回 的 数据 块 都 不 同 ， 所 以 每 次 在 读 取 文 件 


F 前 必须 先 重 构 一 个 新 的 FileReader 


对 象 , 然后 将 每 个 文件 以 数据 URL 的 方式 读 入 页 面 中 。 当 读 取 成 功 时 触发 onload 事件 ,在 该 


事件 中 通过 属性 “result” 获 取 文 件 读 入 页 面 中 的 URL 地 址 ， 并 将 该 地 址 与 <img> 元 素 进 行 绑 


定 。 最 后 通过 列表 ID 号 为 <ulUpload> 的 列表 元 素 展示 在 页 面 中 ， 从 而 实现 上 传 图 片 文件 预览 
的 效果 。 执 行 效 果 如 图 16-8 所 示 。 


16.7 


=I x] 
v era Uum 0 EE m 
€ > 2 - | @ 本 地 “| localhost/E:ñ w | [E] 使用 RD 

预览 图 片 : 


“C:\Documents and Set 添加 文件 


De 4$ 6 a — 


图 16-8 ”执行 效果 


读 取 某 个 文本 文件 的 内 容 


fr HTML 5 页 面 中 , 使 用 接口 FileReader 中 的 方法 readAsTextO0 可 以 将 文件 以 文本 编码 的 


方式 读 取 。 具 体 实现 的 方法 与 读 取 图 片 的 方法 基本 相似 ， 只 是 读 取 文件 的 方式 不 一 相 
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文本 文 


Tro 3X 


在 本 实例 的 代码 中 , 因为 在 “file” 类 型 的 <input> 文 


实例 16-7 说 HJ 
源码 路 径 daima\16\16-7\ 
功能 读 取 某 个 文本 文件 的 内 容 


实例 的 功能 是 在 页 面 的 表单 中 新 建 一 个 “fle” 类 型 的 <input> 元 素 ， 功 能 是 获取 上 传 的 


件 。 当 单 击 “选择 文件 ”按钮 并 选 
例文 件 7.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 
<title> 读 取 文 本 文件 </title> 


<link href="css.css" rel="stylesheet" type="text/css"> 


<script type="text/javascript" language="jscript" 
sre="js7.js"/> 
</script> 
</head> 
<body> 
<form id="frmTmp"> 
<fieldset> 
<legend> 杀 ， 开 始 读 取 了 ! </legend> 


一 个 文本 文件 后 ， 在 页 面 中 显示 该 文本 文件 的 内 


«input type-"file" name="fleUpload" id="fleUpload" 
onChange-"fileUpload ReadTxtFile(this.files);"/> 


«article id="artShow"></article> 
</fieldset> 
</form> 
</body> 


</html> 


所 以 单 击 “ 选 择 文件 ”按钮 后 会 返回 单个 “file” 


编写 JavaScript 文件 js7.js， 在 此 首先 检测 浏 
重 构 一 个 新 的 FileReader 对 象 ， 并 调用 该 对 和 象 的 readAsText() 方 法 将 文件 以 文本 编码 的 方式 读 


入 页 面 ! 


文件 


牛 上 传 元 素 中 没有 添加 属性 “multiple”， 


览 器 是 否 支 持 FileReader 对 象 。 如 果 文 持 则 


。 然 后 通过 “result” 属 性 获取 读 入 的 内 容 ， 并 将 该 内 容 赋值 给 ID 号 为 <artShow> 的 


元 素 ， 最 后 通过 该 元 素 将 文本 文件 的 内 容 显示 在 页 面 中 。 文 件 js7js 的 代码 如 下 。 


// JavaScript Document 
function $$(id) í 
return document. getElementById(id); 
j 
/选择 上 传 文件 时 调用 的 函数 
function fleUpload ReadTxtFile(f) í 
/检测 浏览 器 是 否 文 持 FileReader 对 象 
if (typeof FileReader == 'undefined") í 


alert(" 检 测 到 您 的 浏览 器 不 支持 FileReader 对 象 ! "); 
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} 
var tmpFile = f[0]; 
var reader = new FileReader(); 
reader.readAsText(tmpFile); 
reader.onload = function(e) í 
$$("artShow").innerHTML = "<pre>" + e.target.result + "</pre>"; 


} 
执行 效果 如 图 16-9 所 示 。 


亲 ，, FM INE I| 
C:\Documents and Sett 浏览 … 


JA20042E 3S RB 3S HT FI RERA” TEXTES Ja , [0138-32 IB SB — ESTE S ARGEBEESERS F T +—fR2 tk. AUBLHIEHB ERR FERT EER, RI T RESO ERE 
称 里 尼 奥 重 回 英超 的 传言 始 于 何 时 ? RERE. FAARAHI £d. TEACA m 3 , PRERE TE- UCRGIADRDNERHTERDISE GE. RAAME FE ES 


0-5 惨 败 于 巴萨 终究 是 移 里 尼 奥 难以 启齿 的 痛 


pic 
媒体 不 断 报道 有 关 称 里 尼 奥 回归 的 传闻 
县 城 苦 追 三 年 ， 称 帅 皇 马 岁月 多 不 顺 ( 2008 年 -2010 年 ) 


早 在 0 年， 英超 暴发 户 曼城 就 开始 向 穆 帅 发 起 攻势 ,年薪 甚至 开 到 了 1500 万 英镑 天 价 。 不 过 当时 的 曼城 阵容 还 远 不 如 现在 富裕 ， 称 帅 选择 坚守 国米 也 算是 情理 之 中 。 一 年 之 后 的 0 
2010 年 12 月 初 ; 皇马 在 世纪 大 战 中 0-5 惨 败 巴 萨 脚下 遭受 奇 耻 大 辱 ， 称 里 尼 奥 与 皇马 高 层 的 裂隙 也 第 一 次 被 正式 放大 。12 月 22 日 ,西班牙 权威 媒体 《 马 卡 报 $ 独家 披露 ， 巴 尔 达 诺 
英 媒 炉 风 点 火 ， 称 帅 表示 向 往 英格兰 ( 2011 年 至 今 ) A 


当地 时 间 1 月 27 日 ， 英 国 《太阳 报 给 出 了 在 当时 最 确切 的 一 则 新 闻 一 一 穆 里 尼 奥 确认 重 回 英超 。 一 周 后 ， 英 国 另 一 著名 小 报 (FARR 也 跟 进 报道 ,直言 黎 帅 重 回 英超 成 定局 
穆 帅 3 月 初 曾 遇 到 | 行刺 事件 ,皇马 官方 的 回 皮 态 度 却 非常 冷淡 ,西班牙 机密 报 》 称 这 让 穆 里 尼 奥 提前 的 走 人 决心 进一步 坚定 。3 月 13 日 ,欧冠 八 弹 战 抽签 之 前 ， 乏 里 尼 奥 在 接受 
称 里 尼 奥 缘何 想 回 英超 ? 因为 唯 有 在 那 片 土地 上 ， 贡 才能 做 最 真实 的 自我 ， 享 受 最 澎 洲 的 掌声 和 赞美 。 同 时 ， 也 唯 有 舰队 竺 的 媒体 ， 才 会 热衷 于 这 样 的 造 神 运动 ， 穆 里 尼 奥 的 终极 目 机 


马尔 达 庄 不 会 让 移 里 尼 奥 在 皇马 一 人 独 大 
REESEN EERME 
回归 理由 之 二 : 英 式 教练 集权 化 


在 称 里 尼 奥 的 主帅 时 代 ， 对 权力 的 控制 欲 就 更 加 明显 。2004 年 落户 斯 坦 福 桥 ， 称 帅 完全 按照 自己 思路 收购 球员 ，, 打造 出 了 肌肉 力量 型 的 切尔西 ; 此 后 阿布 挖 来 阿 内 森 ， 以 及 亲自 若 
BES CAS sss » 蓝 黑 时 代称 里 尼 奥 刚 一 入 主 就 力求 重 塑 切尔西 时 代 的 风骨 , 200938 XCISGEPHIHAGEHRTERS , ht A aRU U E BE AE. MERS, ERAN 
! =: s: 


SGREREREBGREEIX— IE BEEN, SER ses E RIHOT-E ESUE. Crime 365#yapIE E: , EREIRRGEREGKUISRROR , HERRAR. LEDAMA. RIDES 
英伦 赛场 除了 球迷 忠贞 不 论 之 外 ， 舰 队 街 媒体 也 很 合 称 里 尼 奥 的 口味 。 英 国 媒体 向 来 最 热衷 的 行为 就 是 “ 造 神 ” 和 “ 毁 神 ”。 在 英超 时 期 三 年 七 座 奖杯 的 效率 。 相 比 于 意甲 时 代 上 
从 英国 媒体 的 报道 及 综合 分 析 看 ， 切 尔 西 、 曼 城 、 曼 联 和 利物浦 是 狂人 重 返 英超 的 4 个 可 能 去 处 ， 这 其 中 曼城 最 有 希望 得 贤 ， 只 是 他 们 还 缺少 一 个 理想 的 CE0 来 和 称 里 尼 奥 拍档 …… 
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图 16-9 执行 效果 


168 ”监听 事件 


在 接口 FileReader 中 提供 了 很 多 常用 的 事件 和 一 套 完 整 的 事件 处 理 机 制 。 通 过 这 些 事件 
的 触发 ， 可 以 清晰 地 侦 听 FileReader 对 象 读 取 文 件 的 详细 过 程 ， 以 便 更 加 精确 地 定位 每 次 读 
取 文 件 时 的 事件 先后 顺序 ， 为 编写 事件 代码 提供 有 力 的 支持 。 表 16-2 总 结 了 FileReader 对 象 
中 的 这 些 状 态 事件 。 


1 


表 16-2 FileReader 对 象 中 的 状态 事件 


do d Jü R 

onabort 数据 读 取 中 断 时 触发 

onerror 数据 读 取出 错时 触发 
onloadstart 数据 读 取 开 始 时 触发 
onprogress 数据 读 取 中 

onload 数据 读 取 成 功 完成 时 触发 
onloadend 数据 读 取 完成 时 触发 ， 无 论 成 功 或 失败 
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要 想 在 HTML 5 网 页 中 中 实现 拖 放 操作 ， 至 少 要 经 过 如 下 两 个 步 又: 
CD 将 要 拖 放 的 对 象 元 素 的 “draggable” 属 性 设 为 “true(draggable="true")”， 这样 才能 
对 该 元 素 进行 拖 放 。 另 外 默认 允许 拖 放 <img> 元 素 与 <a> 元 素 (必须 指定 href). 
(2) 编写 与 拖 放 有 关 的 事件 处 理 代 码 。 拖 放 的 几 个 事件 如 表 16-3 所 示 。 


表 16-3 与 拖 放 有 关 的 事件 处 理 


# dm 产生 事件 的 元 素 描 R 
dragstart 被 拖 放 的 元 素 开始 拖 放 操作 
drag 被 拖 放 的 元 素 拖 放 过 程 中 
dragenter 拖 放 过 程 中 鼠标 经 过 的 元 素 被 拖 放 的 元 素 开始 进入 本 元 素 的 范围 内 
dragOVer 拖 放 过 程 中 鼠标 经 过 的 元 素 被 拖 放 的 元 素 正 在 本 元 素 范围 内 移动 
dragleave 拖 放 过 程 中 鼠标 经 过 的 元 素 被 拖 放 的 元 素 离开 本 元 素 的 范围 
drop 拖 放 的 目标 元 素 有 其 他 元 素 被 拖 放 到 了 本 元 素 中 
dragend 拖 放 的 对 象 元 素 拖 放 操作 结束 
实例 16-8 说 HJ 
源码 路 径 光盘 :daimaN16\16-8\ 
功能 监听 事件 


在 本 实例 的 表单 中 ， 首 先 添 加 一 个 “fle” 类 型 的 <inpu 人 元 素 ， 当 用 户 单 击 “ 选 择 文件 ” 
按钮 并 通过 打开 的 窗口 选取 一 个 文件 后 ， 在 页 面 中 将 展示 读 取 文 件 过 程 中 所 触发 的 事件 。 实 
例文 件 8.html 的 实现 代码 如 下 。 
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<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title> 展 示 触 发 事件 的 顺序 </title> 

<link href="css.css" rel="stylesheet" type="text/css"> 


<script type="text/javascript" language="jscript" 
sre="js8.js"/> 
</script> 
</head> 
<body> 
<form id="frmTmp"> 
<fieldset> 
<legend> 演 示 文 件 读 取 事 件 的 顺序 </legend> 
<input type="file" name="fleUpload" id="fleUpload" 
onChange="fileUpload ShowEvent(this.files);"/> 
<p id="pStatus"></p> 
</fieldset> 


</form> 
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</body> 
</html> 


在 上 述 代码 中 ， 当 单 击 “ 选 择 文件 ”按钮 后 会 触发 一 个 自 定义 的 函数 fileUpload Show 
Event()。 此 函数 是 在 文件 js8.js 中 定义 的 ， 此 函数 首先 检测 浏览 器 是 否 文 持 FileReader 对 
象 ， 如 果 不 文 持 则 弹出 错误 提示 信息 。 然 后 重新 构造 一 个 新 的 FileReader 对 象 ， 并 对 传 回 
的 文件 以 文本 编码 的 方式 读 入 页 面 。 最 后 列 出 文件 在 正常 读 取 过 程 中 将 触发 的 4 个 事件 。 
在 每 个 事件 中 ， 首 先 显 示 ID 号 为 <pStatus> 的 元 素 ， 然 后 将 事件 的 状态 内 容 设置 为 该 元 素 
的 文本 内 容 当 FileReader 对 象 执行 readAsText() 方 法 读 取 文件 时 ， 各 个 不 同事 件 将 按 执 
行 顺 序 被 触发 ， 设 置 的 状态 内 容 以 动态 的 方式 显示 在 ID 号 为 <pStatus> 的 页 面 元 素 中 。 文 
件 js8js 的 代码 如 下 。 


// JavaScript Document 
function $$(id) í 

return document.getElementById(id); 
j 
/选择 上 传 文件 时 调用 的 函数 
function fileUpload ShowEvent(f) í 

if (typeof FileReader == 'undefined') í 

alert(" 检 测 到 您 的 浏览 器 不 支持 FileReader 对 象 ! "); 


} 
var tmpFile = f[0]; 
var reader — new FileReader(); 
reader.readAsText(tmpFile); 
reader.onload = function(e) í 
$$("pStatus").style.display—"block"; 
$$("pStatus").innerHTML = "数据 读 取 成 功 !"; 
} 
reader.onloadstart = function(e) í 
$$("pStatus").style.display="block"; 
$$("pStatus").innerHTML = "开始 读 取 数据 ..…"; 


} 
reader.onloadend = function(e) { 
$$("pStatus").style.display="block"; 
$$("pStatus").innerHTML = "文件 读 取 成 功 !"; 


} 
reader.onprogress = function(e) { 
$$("pStatus").style.display="block"; 
$$("pStatus").innerHTML = "正在 读 取 数据 .…"; 


} 
执行 效果 如 图 16-10 所 示 。 
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展示 名 发 事件 的 硕 序 - Opera = D| x] 
UP orere | Ar 展示 出 发 事件 的 顺序 ES [uj 
< Fs [EE 1 localhost/E:/ GHAL 


演示 文件 读 职 事件 的 顺序 
“C:\Documents and Set 选择 ... | 


文件 读 取 成 功 ! 


De @ — 


图 16-10 执行 效果 


169 ”使 用 拖 搜 的 方式 上 传 图 片 


fr HTML 5 页 面 中 ， 使 用 DataTransfer 对 象 中 的 方法 ， 可 以 实现 在 浏览 器 中 拖 搜 移动 某 
个 应 用 文件 的 效果 。 虽 然 在 之 前 的 HIML 4 以 及 之 前 的 版 本 也 支持 拖 放 数据 的 操作 ， 但 该 操 
作 仅 局 限 在 整个 浏览 器 中 ， 并 不 支持 浏览 器 之 外 的 数据 。 


实例 16-9 说 HJ 
源码 路 径 daimaM6M6-9 
功能 使 用 拖 搜 的 方式 上 传 图 片 


在 本 实例 的 页 面 表单 中 ， 首 先 创 建 一 个 <u> 元 素来 接收 并 预览 拖 入 的 图 片 文 件 。 当 用 户 
从 电脑 的 文件 夹 中 选择 图 片 文件 后 ， 以 拖 动 的 方式 将 文件 放 入 该 元 素 内 ， 并 以 预览 的 方式 显 
示 。 实 例文 件 9.html 的 实现 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 
<title> 拖 放 上 传 文件 </title> 

<link href-"css.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" language="jscript" 


sre="js9.js"/> 
</script> 
</head> 
<body> 
<form id="frmTmp"> 
<fieldset> 
<legend> 用 拖 动 的 方式 选择 文件 </legend> 
<ul id="ulUpload" ondrop-"dropFile(event)" 
ondragenter-"return false" 


ondragover-"return false"> 
</ul> 
</fieldset> 
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</form> 
</body> 
</html> 


然后 编写 JavaScript 文件 ， 使 用 方法 fileUpload MoveFile0 将 拖 动 的 文件 数据 放 入 到 
DataTransfer 对 象 并 调 取 。 方法 fleUpload MoveFile0 是 在 文件 js9.js 中 定义 的 ， 此 文件 的 主要 
代码 如 下 。 


// JavaScript Document 
function $$(id) í 

return document.getElementById(id); 
} 
/选择 上 传 文件 时 调用 的 函数 
function fileUpload MoveFile(f) í 

/检测 浏览 器 是 否 支持 FileReader X 

if (typeof FileReader == 'undefined") í 

alert(" 检 测 到 您 的 浏览 器 不 支持 FileReader 对 象 ! "); 


j 
for (var intl = 0; intl < f.length; intH+) í 
var tmpFile = f[intl |; 
var reader = new FileReader(); 
reader.readAsDataURL(tmpFile); 
reader.onload = (function(fl) í 
return function(e) í 
var eleSpan = document.createElement('span"); 
eleSpan.innerHTML = ['«img src-", 
e.target.result, " title='", fl.name, '"/7"].join("); 
$$('ulUpload").insertBefore(eleSpan, null); 
j 
1)(tmpFile); 
j 
j 
function dropFile(e) í 
/调用 预览 上 传 文件 的 方式 
fileUpload MoveFile(e.dataTransfer.files); 
/ 俘 止 事件 的 传播 
e.StopPropagation(); 
/阻止 默认 事件 的 发 生 
e.preventDefault(); 


j 


本 实例 首先 将 图 像 文件 从 文件 夹 拖 入 页 面目 标 元 素 ， 然 后 通过 Data Transfer 对 象 中 的 方 
法 setData0 保 存 数据 。 为 了 接收 被 保存 的 数据 ， 页 面 中 的 目标 元 素 在 调用 元 素 的 拖 放 事件 
ondrop 中 调用 了 一 个 自 定义 的 函数 dropFile0。 为 了 确保 目标 元 素 顺 利 接收 拖 放 文件 ， 必 须 将 
目标 元 素 的 ondragenter 与 ondragover 事件 都 返回 “return false”。 

在 函数 dropFile0 中 ， 先 调用 另 一 个 自 定义 的 函数 fileUpload MoveFile()， 同 时 ， 要 实现 
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文件 的 拖 放 过 程 ， 还 要 在 目标 元 素 的 拖 放 事件 中 ， 停 止 其 他 事件 的 传播 并 且 关 闭 默 认 事件 。 
其 实现 的 过 程 如 JavaScript 代码 中 自 定义 的 函数 dropFile0 所 示 。 函 数 fileUpload MoveFile() 
的 运作 流程 如 下 : 

(1) 从 DataTransfer 对 象 中 获取 被 保存 的 文件 集合 。 

(2) 遍历 整个 集合 中 的 文件 成 员 以 获取 每 一 个 单独 的 文件 。 

(3) 通过 重 构 一 个 FileReader 对 象 的 方式 调用 该 对 象 中 的 readAsDataURLO， 将 文件 以 数 
据 地 址 的 形式 读 入 页 面 中 。 

CA) 同时 创建 页 面 元 素 <span>, 将 数据 地 址 与 <img> 元 素 绑 定 , 通过 join(0) 方 法 写 入 <span> 
元 素 的 内 容 中 。 

(5) 将 全 部 获取 的 内 容 写 入 ID 号 为 <uIUpload> 的 列表 元 素 中 , 通过 该 元 素 展示 在 页 面 中 。 
其 具体 的 实现 过 程 ， 跟 JavaScript 代码 中 的 自 定 义 函 数 fieUpload_MoveFile() 类 似 。 

执行 效果 如 图 16-11 Bras. 


用 拖 动 的 方式 选择 交 件 


图 16-11 执行 效果 


16.10” 拖 搜 上 传 图 片 到 表单 并 显示 预览 


本 实例 的 功能 是 ， 可 以 直接 从 本 地 硬盘 中 拖 搜 上 传 图 片 到 容器 中 ， 并 且 在 表单 页 面 中 预 
览 显 示 拖 搜 的 图 片 。 


实例 16-10 说 H 
源码 路 径 daima\16\16-10\ 
功能 拖 搜 上 传 图片 到 表单 并 显示 预览 


实例 文件 10.html 的 实现 代码 如 下 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
«title-HTMLS 浏览 器 拖 放 | HTML5 Drag and drop</title> 
<style> 
#section {font-family: "Georgia", "微软 雅 黑 ", "华文 中 宋 ";} 
.container{display:inline-block;min-height:200px;min-width:360px;color:#f30;padding:30 
px;border:3px solid #ddd;-moz-border-radius: 1 0px;-webkit-border-radius: 1 Opx;border-radius: 1 0px;} 
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.preview {max-width:360px;} 
#files-list (position:absolute;top:0;left:500px; } 
#list{width:460px;} 
#list .preview {max-width:250px;} 
#list p{color:#888;font-size: 12px;} 
#list .green {color:#09c;} 
</style> 
</head> 
<body> 


«div id="section"> 
<p> 把 你 的 图 片 拖 到 下 面 的 容器 内 : </p> 


«div id-"container" class="container"> 


</div> 
«div id ="files-list"> 
<p> 已 经 拖 进 过 来 的 文件 ，</p> 
«ul id="list"></ul> 
</div> 
</div> 


<script> 


if (window.FileReader) í 
var list = document.getElementBylId( list"), 
cnt = document.getElementById( container"); 
/ 判断 是 否 图 片 
function islmage(type) í 
switch (type) í 


case 'image/jpeg': 


case 'image/png': 
case 'image/gif: 
case 'image/bmp': 
case 'image/jpg': 
return true; 
default: 
return false; 


j 

/ 处 理 拖 放 文件 列表 

function handleFileSelect(evt) í 
evt.stopPropagation(); 
evt.preventDefault(); 
var files = evt.dataTransfer.files; 
for (var i = 0, f; f = files[1]; i+) í 

var t = f.type ? f.type : 'n/a', 
reader = new FileReader(), 
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looks = function (f, img) í 
list.innerHTML += '<li><strong>' + f.name + '</strong> ( + t + 
')-' + f.size + ' bytes<p>' + img + '</p></l>'; 
cnt.innerHTML = img; 
h 
isImg = isImage(t), 
img; 
/ 处 理 得 到 的 图 片 
if (isImg) { 
reader.onload = (function (theFile) { 
return function (e) { 
img = '<img class="preview" src="! + e.target.result + " title=" + 


theFile.name + "/>'; 
looks(theFile, img); 
n 
DO 
reader.readAsDataURL(f); 
} else í 
img="o(o<))o"， 你 传 进来 的 不 是 图 片 ! ! "5 
looks(f, img); 


/ 处 理 插入 拖 出 效果 
function handleDragEnter(evt) ( this.setAttribute('style', 'border-style:dashed;'); } 
function handleDragLeave(evt){ this.setAttribute('style', "); + 
/ 处 理 文件 拖 入 事件 ， 防 止 浏览 器 默认 事件 带 来 的 重 定向 
function handleDragOver(evt) í 
evt.stopPropagation(); 


evt.preventDefault(); 


cnt.addEventListener('dragenter', handleDragEnter, false); 
cnt.addEventListener('dragover', handleDragOver, false); 
cnt.addEventListener('drop', handleFileSelect, false); 
cnt.addEventListener('dragleave', handleDragLeave, false); 
} else í 
document.getElementByld('section").innerHTML = ' 你 的 浏览 器 不 支持 啊 ， 同 学 '; 
} 
</script> 
</body> 
</html> 


执行 后 的 效果 如 图 16-12 所 示 。 
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把 你 的 图 片 拖 到 下 面 的 容器 内 : 已 经 拖 进 过 来 的 文件 : 


* 2011-5-1 9-42-06.png (image/png) - 13171 bytes 
I @ 


. B RESEP F4.jpg (image/jpeg) - 83618 
ytes 


| 


VR] 


16-12 执行 效果 


16.11 IE 浏览 器 支持 的 上 传 图 片 预 览 程序 


因为 特殊 原因 ， 和 其 他 浏览 器 相 比 ， 微 软 的 下 浏览 器 总 是 滞后 于 对 HTML 5 的 支持 。 


实例 16-11 说 H 
源码 路 径 daima\16\16-11\ 
功能 IE 浏览 器 支持 的 上 传 图 片 预览 程序 


本 实例 的 功能 是 ， 使 用 “document” 对 象 获取 图 片 的 大 小 ， 并 有 旦 取得 在 下 浏览 器 下 图 片 
的 路 径 ， 最 终 在 IE 页 面 中 实现 图 片 预览 功能 。 实 例文 件 11.html 的 实现 代码 如 下 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http;//www.w16.org/TR/xhtml1/DTD/xhtmll -transitional.dtd"- 

<html xmlns-"http://www.w16.org/1999/xhtml" xml:lang-"en" lang-"en"7 
<head> 

«meta http-equiv-"Content-Type" content="text/html; charset=utf-8" /> 
<script> 


var picPath; 

var image; 

// preview picture 

function preview()í 
/ 下 面 代码 用 来 获得 图 片 尺 寸 ， 这 样 才能 在 IE 下 正常 显示 图 片 
document.getElementByld('box").innerHTML 
= "<img width-""--image.width--" height='"+image.height+" id—'aPic' sre='"+picPath+">"; 


j 
function loadImage(ele) í 
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picPath = getPath(ele); 
image = new Image(); 
1mage.src = picPath; 


preview(); 
j 
function getPath(obj) ( 
if(obj)t 
/he 
if (window.navigator.userAgent.indexOf(" MSIE")»—1)1 
obj.select(); 
/下 下 取得 图 片 的 本 地 路 径 
return document.selection.createRange().text; 
j 
//firefox 
else if(window.navigator.userAgent.indexOf("Firefox")^—1)1 
if(obj.files)( 
// Firefox 下 取得 的 是 图 片 的 数据 
return obj.files.item(0).getAsDataURL(); 
j 
return obj.value; 
j 
return obj.value; 
j 
j 
</script> 
</head> 
<body> 


«input type-"file" name-"pic" id="pic" onchange='loadImage(this);' /> 
«div id='box'></div> 


</body> 
</html> 
执行 后 可 以 在 正 浏览 器 下 预览 上 传 后 的 图 片 文件 ， 执 行 后 的 效果 如 图 16-13 所 示 。 


了 :\ 洁 华 \HTHL5SAHTIL 范 例 \daimav0TT\0TT. html — Windows Internet Explorer = [D| x| 
[cm v |ë UIST -| ¿+ >< [PEE | | | | 
ifa) 编辑 区 ) SEV BERA IRO #BQ0 
Akak |35 e 第 10 章 排序 


-| @EzE: SR... x | Z#hao123_... 


Fa E + mm WEQ- 安全 G)- IRO- @- 


C:\Documents and Settin Loan 


zl 
| D 我 的 电脑 [4g + [Ri - 7 


图 16-13 执行 效果 
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16.12 ”使 用 拖 搜 的 方式 在 相 簿 中 对 照片 进行 排序 


本 实例 的 
短 杠 区域 
同 的 相 短 中 。 


JE 
ER 


2 


功能 是 ， 在 相册 中 对 照片 进行 排序 。 在 具体 实现 过 程 中 ， 需 要 先 设 计 三 个 相 


后 在 下 面 罗列 显示 12 幅 不 同 的 图 片 , 用 户 可 以 使 


j 拖 搜 的 方式 将 图 片 放 在 不 


实例 16-12 说 明 
原 码 路 径 daima\16\16-12\ 
功能 用 拖 搜 的 方式 在 相 禾 中 对 照片 进行 排序 


实例 文件 12.html 的 实现 代码 如 下 。 
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«IDOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 
<title> 拖 放 上 传 文件 </title> 

<link href-"css.css" rel="stylesheet" type="text/css"> 


<script type="text/javascript" language: 


'jscript" 
sre="js075.js"/> 


</script> 

</head> 

<body> 

<div class="albums"> 
<div class 


<div 


<div 


="album" id="drop_1" droppable="true"><h2>Album 1</h2></div> 


<div class="album" id="drop_2" droppable="true"><h2>Album 1</h2></div> 
<div class="album" id="drop_3" droppable="true"><h2>Album 3</h2></div> 


</div> 


style="clear:both"></div> 


class="gallery"> 


images/1.jpg"></a> 


images/2.jpg"></a> 


<a id="1" draggable="true"><img src 
<a id="2" draggable="true"><img src 
<a id="3" draggable="true"><img src="images/3.jpg"></a> 
<a id="4" draggable="true"><img src="images/4.jpg"></a> 
<a id="5" draggable="true"><img src="images/5.jpg"></a> 
<a id="6" draggable="true"><img src="images/6.jpg"></a> 
<a id="7" draggable="true"><img src="images/7.jpg"></a> 
<a id="8" draggable="true"><img src="images/8.jpg"></a> 


images/9.jpg"></a> 


«a id="9" draggable="true"><img src 
«a id="10" draggable="true"><img src 


«a id-" 11" draggable="true"><img src 


«a id-" 12" draggable-"true"«img src 


</div> 


<script sre="js12.js"></script> 


images/10.jpg"></a> 
images/11.jpg"></a> 
images/12.jpg"></a> 
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</body> 


</html> 


JavaScript 文件 js12.js 的 代码 如 下 。 


/添加 事件 处 理 程序 
var addEvent = (function () í 
1f (document.addEventListener) í 


return function (el, type, fn) í 
if (el && el.nodeName || el === window) í 
el.addEventListener(type, fn, false); 
} else if (el && el.length) í 
for (var i = 0; i < el.length; r+) í 
addEvent(el[i], type, fn); 


j 


h 
) else í 
return function (el, type, fn) í 
if (el && el.nodeName || el === window) í 
el.attachEvent('on' + type, function () í return fn.call(el, window.event); )); 
) else if (el && el.length) í 
for (var i = 0; 1 < el.length; r+) í 
addEvent(el[i], type, fn); 


D0; 
// 内 部 变量 


var dragltems; 


updateDataTransfer(); 
var dropAreas = document.querySelectorAlI('[droppable=true]'); 
// preventDefault (stops the browser from redirecting off to the text) 
function cancel(e) í 

if (e.preventDefault) í 

e.preventDefault(); 

j 

return false; 
j 
/更 新 事件 处 理 程 序 
function updateDataTransfer() í 


dragltems = document.querySelectorAll('[draggable=true]'); 
for (var i = 0; i < dragltems.length; i++) í 
addEvent(dragItemsļ[i], 'dragstart', function (event) í 
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event.dataTransfer.setData('obj id', this.id); 


return false; 


J); 


} 
// dragover 事件 处 理 程序 
addEvent(dropAreas, 'dragover', function (event) í 


if (event.preventDefault) event.preventDefault(); 
/小 定制 
this.style.borderColor = "#000"; 
return false; 

J) 

// dragover 事件 处 理 程序 

addEvent(dropAreas, 'dragleave', function (event) í 


if (event.preventDefault) event.preventDefault(); 
IL] 
this.style.borderColor = "ccc"; 
return false; 
J) 
// dragover 事件 处 理 程序 
addEvent(dropAreas, 'dragenter', cancel); 
/删除 事件 处 理 程 序 
addEvent(dropAreas, 'drop', function (event) í 
if (event.preventDefault) event.preventDefault(); 
/删除 对 象 
var iObj = event.dataTransfer.getData('obj id'); 
var oldObj = document.getElementById(1Obj); 
/得 到 的 图 像 源 
var oldSrc = oldObj.childNodes[0].src; 
oldObj.className += 'hidden'; 
var oldThis = this; 
setTimeout(function() í 
oldObj.parentNode.removeChild(oldObj); /从 DOM 删除 对 象 
/添加 类 似 的 物体 在 另 一 个 地 方 
oldThis.innerHTML += '«a id="'HObj+" draggable="true"><img sre=""+oldSrc+" /></a> 
/事件 处 理 程序 并 更 新 
updateDataTransfer(); 
/小 定制 
oldThis.style.borderColor = "#ccc"; 
}, 500); 
return false; 


J); 
执行 后 先 在 页 面 上 方 显示 3 NAE, FOER 12 幅 图 片 ， 如 图 16-14 所 示 。 


— 
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Album 1 Album 1 Album 3 


图 16-14 ”执行 效果 


用 户 可 以 用 拖 搜 的 方式 将 下 方 的 12 幅 图 片 放 在 上 方 的 相 竹中 ， 如 图 16-15 所 示 。 


ss sm =u =m 
一 


图 16-15 执行 效果 
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ERE KA S 


使 用 HTML 54CSS 3 开发 商业 


站 点 实例 


经 过 前 面 内 容 的 学 习 ， 读 者 已 了 解 了 使 有 


当今 最 流行 的 页 面 修饰 技术 一 一 CSS 3. 


HTML 5+ CSS 3+<div> 技 术 开 发 大 型 商业 网 立 


H HTML 5 设计 网 页 的 基本 知识 。 本 章 将 介 
并 通过 一 个 具体 实例 的 实现 过 程 ， 向 读者 介绍 联合 使 用 
上 的 方法 。 在 讲解 过 程 中 ， 对 整个 站 点 的 实现 流程 


一 种 


进行 了 详细 介绍 ， 读 者 可 以 直接 将 实例 中 的 一 些 技巧 应 用 到 自己 的 项 目 中 去 。 


171 CSS 3 基础 


CSS (Cascading Style Sheet, 


ZAR 


F 式 表 )， 简 称 为 样式 表 ， 是 W3C 组 织 制定 的 、 控 


制 页 面 显示 样式 的 标记 语言 。CSS 的 最 新 版 本 是 CSS 3.0， 这 是 现在 网 页 所 遵循 的 通用 标准 。 


本 节 简要 介 


CSS 技术 的 基本 知识 。 


17.1.1 CSS 概述 


在 网 页 需要 将 指定 内 容 按照 指定 样式 显示 时 ， 可 以 利用 CSS 实现 。 在 网 页 中 有 如 下 两 种 


使 用 CSS 的 方式 。 


O 页 内 直接 设置 CSS: 即 在 当前 使 月 


日 页 面 直接 指定 样式 。 


口 第 三 方 页 面 设置 : 即 在 别 的 网 页 中 单独 设置 CSS, 然后 通过 文件 调用 这 个 CSS 来 实现 


指定 显示 效果 。 


CSS 样式 设置 的 具体 运行 流程 如 区 


方式 一 : 
页 内 设置 


I. 


图 17-1 CSS 样式 设 


| 方式 一 : 第 三 
方 页 面 设置 


置 运 行 流程 


下 面 将 通过 一 个 具体 的 CSS 应 用 实例 ， 来 看 CSS 在 网 页 中 的 表现 效果 。 


第 17 章 使 用 HTML 5+CSS 3 开发 商业 站 点 实例 


实例 17-1 说 明 
源码 路 径 daima\17\1.html 
功能 使 用 CSS 修饰 网 页 


实例 文件 1.html 的 主要 代码 如 下 。 


<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 无 标题 文档 </title> 

<!-- 设 置 样式 STYLE1， 指 定 页 面 文件 字体 。-->. 
«style type="text/css"> 


<l 


STYLEI í 


font-family: Arial, Helvetica, sans-serif, 


font-size: 24px; 
color: #990033; 
font-weight: bold; 
font-style: italic; 


j 


= 
</style> 
</head> 
<body> 


<!-- 调 用 样式 STYLE1， 应 用 于 此 页 面 字 体 后 的 显示 效果 --> 
«span class="STYLE1"> 要 使 用 CSS 呀 </span> 


</body> 


执行 后 的 效果 如 图 17-2 所 示 ， 如 果 取 消 样 式 ， 则 效果 如 图 17-3 所 示 。 


E Erza npa =l - Microsoft Internet Explorer [s] x| 


xig) REO SEV KEW IRC" Q 


Qm- O- dope " 


mto fer] Daa | 链接 > 


@ Snt FE] 过 


ZRHCSSEF 


es | jen] 
图 17-2 显示 效果 
从 上 述 不 同 的 显示 效果 中 可 以 看 出 CSS 的 样式 的 作用 十 分 明显 ， 它 可 以 帮助 用 户 更 好 地 


编辑 网 


页 。 


17.1.2 ”基本 语法 


因 


为 在 现实 应 用 


| | j 我 的 电脑 E 


常用 到 的 CSS 元 素 是 选择 符 、 属 性 和 值 。 所 以 在 CSS 的 应 用 语法 


A Amt - Microsoft Internet Explorer — [mI 
XO ”编辑 E) SEV KEW IRI? 4 


Om- O AAA E 


地 址 中 je EJ 21 L. > @saz+ 图 t 
要 使 用 CSS 呀 
Ei 
Basr | | [ [ Hatim Z 


图 17-3 取消 样式 后 效果 
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y 


«style type="text/css"> 
<J 
.选择 符 { 属 性 : 值 } 
> 


</style> 


中 其 主要 应 用 格式 也 主要 涉及 上 述 3 种 元 素 。CSS 的 基本 语法 结构 如 下 。 


例如 ， 在 本 章 17.1.1 节 的 实例 中 的 代码 就 严格 按照 上 述 格式 : 


«style type="text/css"> 


= 
.STYLEI í 
font-family: Arial, Helvetica, sans-serif; 
font-size: 24px; 
color: #990033; 
font-weight: bold; 
font-style: italic; 
} 
= 
</style> 


在 使 用 CSS 时 ， 需 要 遵循 如 下 所 示 的 原则 : 


口 当 有 多 个 属性 


口 


= 


属性 必须 包含 在 “人 ”中 。 


寸 ， 属 性 之 间 必 须 用 “; ” 隔 开 。 


口 在 属性 设置 过 程 中 ， 可 以 使 用 空格 、 换 行 等 操作 。 


口 如 果 一 个 属性 有 多 个 值 ， 必 须 用 空格 将 它们 隔 


17.1.3 


选择 符 的 使 用 


选择 符 即 样式 的 名 称 ，CSS 选择 符 可 以 使 用 如 下 所 示 的 字符 。 


口 


IE EL. ¿(n 
BE 


口 人 句号 “@ >” 


注意 : CSS 选择 符 只 能 以 字母 开头 。 


ne 


"mH 


class 选择 符 、 标 签 指定 选择 符 、 组 合 选 择 


(1) 


通 配 选择 符 


通 配 选择 符 : 
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Q 大 小 写 的 英文 字母 :;“A-Z”，“a-z”。 
Q 数字 : 例如 “0-9”。 
üu 连 字号 € o» 
üu 下 划 线 人 


Hf] CSS 选择 符 有 通 配 选 择 符 、 类 型 选择 符 、 群 组 选择 符 、 包 含 选择 符 、ID 选择 符 、 


符 等 。 下 面 将 对 上 述 各 类 选择 符 进行 详细 介绍 。 


通 配 选 择 符 的 书写 格式 是 “*” 功能 是 表示 页 面 内 所 有 元 素 的 样式 。 妇 


HE 下 代码 就 使 用 了 


第 17 章 使 用 HTML 5+CSS 3 开发 商业 站 点 实例 “7 
> 1 


font-family: Arial, Helvetica, sans-serif; 
font-size: 24px; 
color: #990033; 
font-weight: bold; 
font-style: italic; 


j 


(2) 类 型 选择 符 
类 型 选择 符 是 指 ， 以 网 页 中 已 有 的 标签 类 型 作为 名 称 的 选择 符 。 例 如 将 <body>、<div>、 
<p>、<span> 等 网 页 中 的 标签 作为 选择 符 名 称 。 下 面 的 代码 将 页 面 <body> 元 素 内 的 字体 进行 了 


rr 


设置 。 


div í 
font-size: 24px; 
color: #990033; 
font-weight: bold; 
j 


注意 : 所 有 的 页 面 元 素 都 可 以 作为 选择 符 。 
(3) 群 组 选择 符 
在 XHTML 中 ， 对 其 一 组 对 象 同 时 进行 相同 的 样式 指派 时 ， 只 需 使 用 “逗号 ”对 选择 符 
进行 分 隔 即 可 。 这 种 方法 的 优点 是 对 于 同样 的 样式 只 需要 书写 一 次 ,减少 了 代码 量 ， 改 善 了 
CSS 代码 结构 。 群 组 选择 符 的 书写 格式 如 下 。 
选择 符 1, 选 择 符 2 Y63640 3, 选 择 符 4 


下 面 的 代码 使 用 了 群 组 选择 符 对 指定 对 象 的 页 面 文字 进行 了 设置 。 


.name,div,p{ 


font-size: 24px; 
color: #990033; 
} 


注意 : 在 使 用 群 组 选择 符 时 ， 使 用 的 "逗号 "是 半角 模式 ， 并 非 中 文 全 角 模 式 。 

(4) 包含 选择 符 

包含 选择 符 的 功能 是 对 某 对 象 中 的 子 对 象 进行 样式 指定 ， 其 书写 格式 如 下 。 
选择 符 1 选择 符 2 

例如 下 面 的 代码 使 用 了 包含 选择 符 ， 对 <body> 元 素 内 <p> 元 素 包含 的 文字 进行 了 设置 。 


body pí 
font-size: 24px; 
color: #990033; 


} 


此 方法 的 优点 是 避免 过 多 的 对 ID 和 class 进行 设置 ， 直 接 对 所 需 的 元 素 进行 定义 。 
EN 433 


O HTML 5 开发 从 入 门 到 精通 
注意 : 在 使 用 包含 选择 符 时 需要 注意 如 下 两 点 : 
口 样式 设置 仅 对 此 对 象 的 子 对 象 标 签 有 效 ， 对 于 其 它 单独 存在 或 位 于 此 对 象 以 外 的 子 对 
象 ， 不 应 用 此 样式 设置 。 例 如 上 例 中 的 样式 只 对 <body> 元 素 内 的 <p> 元 素 进行 设置 ， 
而 对 <body> 元 素 外 的 <p> 元 素 没有 效果 。 
口 选择 符 1 和 选择 符 2 之 间 必 须 用 空格 隔 开 。 
(5) ID 选择 符 
ID 选择 符 是 根据 DOM 文档 对 象 模型 原理 所 出 现 的 选择 符 。 在 XHTML 文件 中 ， 其 中 的 
每 一 个 标签 都 可 以 使 用 “id=""” 的 形式 进行 一 个 名 称 指派 。 在 “XHTML+CSS” 布 局 的 网 页 
中 ， 可 以 针对 不 同 的 用 途 进 行 命名 ， 例 如 头 部 命名 为 “header”， 底 部 命名 为 “footer”。 
ID 选择 符 的 使 用 格式 如 下 。 
# 选择 符 


下 面 通过 一 个 实例 来 讲解 ID 选择 符 的 使 用 方法 ， 本 实例 文件 为 2.html， 保 存在 “3” 文 
件 夹 中 。 


实例 17-2 说 — HJ 
源码 路 径 daima\17\2.html 
功能 讲解 ID 选择 符 的 使 用 方法 


文件 2.html 的 主要 代码 如 下 。 


<title> 无 标题 文档 </title> 
«style type="text/css"> 
=l 
#STYLE2 í 
color: #FF0000; 
font-size: 24; 


j 


EE 
</style> 
</head> 
<body> 
<div id="STYLE2"> 要 使 用 CSS </div> 
</body> 


执行 后 的 效果 如 图 17-4 所 示 。 


ET ss > @ saan El tg | 


要 使 用 CSS 呀 


= 
[I T T 777 7 


图 17-4 ”执行 效果 
注意 : 在 一 个 XHTML 文件 中 ，ID 要 具有 唯一 性 ， 不 能 重复 。 
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(6) class 选择 符 

上 面 介绍 的 ID 是 对 XHTML 标签 的 扩展 ， 而 class 选择 符 和 ID 选择 符 类 似 。class 是 对 
XHTML 多 个 标签 的 一 种 组 合 , class 直译 的 意思 是 类 或 类 别 。class 选择 符 可 以 在 对 于 XHTML 
页 面 中 使 用 class="" 进 行 名 称 指 派 。 与 ID 的 区 别 是 ，class 可 以 重复 使 用 ， 页 面 中 多 个 样式 的 
相同 元 素 可 以 直接 定义 为 一 个 class。 

class 选择 符 的 使 用 格式 如 下 。 


. 选择 符 


使 用 class 选择 符 的 好 处 是 众多 的 标签 均 可 以 使 用 一 个 样式 来 定义 , 不 需要 为 每 一 个 标签 
编写 一 个 样式 代码 。 
使 用 class 选择 符 的 方法 和 ID 选择 符 一 样 ， 只 需 在 页 面 中 直接 调用 样式 代码 。 
(7) 组 合 选择 符 
组 合 选择 符 是 指 对 前 面 介绍 的 6 种 选择 符 进 行 组 合 使 用 。 例 如 ， 如 下 代码 组 合 使 用 了 上 
述 几 种 方法 。 
hl .pl (/A Et hl 下 的 所 有 class 为 pl 的 标签 
#content hl {}W/ 设 置 id 为 content 的 标签 下 的 所 有 hl 标签 
从 本 节 内 容 可 以 看 出 ，CSS 选择 符 是 非常 灵活 的 。 读 者 可 以 根据 自己 页 面 的 需要 ， 合 理 
使 用 各 种 选择 符 ， 尽 量 做 到 结构 化 和 完美 化 的 统一 。 


17.1.4 CSS 属性 的 简介 


CSS 属性 是 CSS 中 最 重要 的 内 容 之 一 ，CSS 就 是 利用 本 身 的 属性 来 实现 其 绚丽 的 显示 效 
ART]. dE CSS 中 常用 的 属性 及 其 对 应 的 属性 值 如 下 。 

(1) 字体 属性 : type 
口 font-family: 使 用 什么 字体 。 
口 font-style: 字体 的 样式 ， 是 否 斜体 ， 有 normal\italic\oblique 三 种 。 
O font-variant: 字体 的 大 小 号， 有 normal 和 small-caps 两 种 。 
O font-weight: 字体 的 粗细 ， 有 normal\bold\bolder\lithter 三 种 。 
口 font-size: 字体 的 大 小 ， 有 absolute-size\relative-size\length\percentage 四 种 。 
(2) 颜色 和 背景 属性 : backgroud 


O color: 定义 前 景色 ， 例 如 : pícolor:red]). 

口 background-color: 定义 背景 色 。 

口 background-image: 定义 背景 图 片 。 

口 background-repeat: 背景 图 案 重 复方 式 ， 有 repeat-x\repeat-y\no-repeat 三 种 。 

口 background-attachmen: 设置 滚动 ， 有 scroll QRZ) Mixe CEER) 两 种 。 

口 background-position: 设置 背景 图 案 的 初始 位 置 ， 有 percentageVengthtopVeftrightibottom 
六 种 。 

(3) 文本 属性 : block 

定义 排序 : 
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(4) 块 属性 : block 


O text-align: 文字 的 对 齐 ， 有 leftvrightcenter justify 四 种 。 

口 text-indent: 文本 的 首 行 缩 进 ， 有 length 和 percentage 两 种 。 

O line-height: 文本 的 行 高 ， 有 normalnumbetVenggthipercentage 〈 百 分 比 ) 四 种 。 
定义 超 链接 : 
C] a: link {color:green;text-decoration:nore}: 未 访问 过 的 状态 。 

O a: visited {color:ren;text-decoration:underline;16pt}: 访问 过 的 状态 。 
O a:hover {color:blue;text-decoration:underline;16pt}: 鼠标 激活 的 状态 。 


置 右边 距 。 


边 距 属性 : 

C] margin-top: 设置 顶 边 距 。 
C] margin-right: ix 
填充 距 属 性 : 


口 padding-top: 设置 顶端 填充 距 。 

O padding-right: 设置 右 侧 填充 距 。 
(5) 边框 属性 : border 

口 border-top-width: 顶端 边框 宽度 。 
O border-right-width: 右 端 边 框 宽度 。 
图 文 混 排 : 
口 width: 定义 宽度 属性 。 
口 height: 定义 高 度 属性 。 


(6) 项 目 符号 和 编号 属性 : list 
县 不 


(7) 层 属 性 : Type 


用 于 设 定 对 象 下 
O Absolute: 2 


口 display: 定义 是 否 显示 符号 。 
口 white-spac: 怎样 处 理 空白 部 分 ， 有 normalprenowrap 三 种 。 


的 定位 方式 。 有 如 下 三 种 定位 方式 : 
色 对 定位 。 


口 Relative: 相对 定位 。 


Q Static: 无 特殊 定 


(8) 列表 属性 
(9) 表格 属性 


(10) 


EERE 


扩展 属性 


位 


EFR, 有 的 属性 只 受 部 分 浏览 器 文 持 。 至 于 CSS 属性 的 更 详细 知识 和 具体 用 汶 


将 在 后 面 的 章节 中 详细 介绍 。 


17.1.5 ” 几 个 常用 值 


在 本 书 前 面 的 内 容 " 


P. 已 经 了 解 了 CSS 选择 符 和 常用 的 属性 ,而 单位 和 属性 值 是 CSS 属 


uu 


YA, 


性 的 基础 。 正 确 理解 单位 和 属性 值 的 概念 ， 将 有 助 于 用 户 对 CSS 属性 的 使 用 。 本 节 将 对 CSS 


中 几 个 常 朋 
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昌 的 单位 和 属 怕 


E 值 进行 简要 介绍 。 


1. 颜色 单位 


口 颜色 名 称 定 义 


第 17 章 使 用 HTML 5+CSS 3 开发 商业 站 点 实例 


在 CSS 中 ， 可 以 通过 多 种 方式 来 定义 颜色 。 其 中 最 为 常用 的 方法 有 如 下 两 种 : 


使 用 颜色 名 称 定 义 颜 色 的 方法 只 能 实现 比较 简单 的 颜色 效果 ， 因 为 具有 有 限 数量 的 颜色 
名 称 才能 被 浏览 器 识别 。 例 如 ， 如 下 代码 定义 了 文字 颜色 为 红色 


«style type="text/css"> 
le 


.STYLE2 (color: red}/* 使 用 颜色 名 red 设置 字体 颜色 */ 


> 
</style> 
</head> 
<body> 


«div class="STYLE2"> 要 使 用 CSS 呀 </div><!-- 调 用 样式 后 的 显示 效果 --> 


</body> 


执行 后 的 效果 如 图 17-5 所 示 。 


E Er ruta =l - Microsoft Inte... [=] Fš 


XFO RED SEV 收 ”| Q 


Qao 
地 址 @) 到 | 链接 > S snert FE] 过 


a 


要 使 用 CSS 呀 


SLE 


ls pear] FEX 


图 17-5 ”执行 效果 


浏览 器 能 够 识别 的 颜色 名 称 如 表 17-1 所 示 。 


表 17-1 浏览 器 识别 的 颜色 名 称 列 表 


颜色 名 称 描 述 颜色 名 称 描 — XR 
red 红色 teal 深 青 
yellow 黄色 white 色 
blue 蓝 色 navy 深蓝 
Silver 银色 olive 橄榄 
purple 紫色 gray 灰色 
green 绿色 lime 浅 绿 
Imaroon 褐色 aqua 水 绿 
black 黑色 fuchsia 紫红 
口 十 六 进 制定 义 
十 六 进 制 定义 是 指使 用 颜色 的 十 六 进 制 数值 定义 颜色 值 。 使 用 十 六 进 制定 义 后 ， 可 以 定 
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义 更 加 复杂 的 颜色 。 例 如 ， 如 下 代码 使 用 了 十 六 进 制 数值 定义 文字 颜色 : 


<style type="text/css"> 
< 
.STYLE2 ( 
color: #0000FF/* 使 用 十 六 进 制 : 0000FF， 定 义 文字 颜色 。*/ 


} 


--> 

</style> 

</head> 

<body> 

<div class="STYLE2"> 要 使 用 CSS 呀 </div><!-- 调 用 样式 --> 
</body> 


执行 后 的 效果 如 图 17-6 所 示 。 Q Q: Ne 
注意 : WEO HN RE" @ sac me 
(1) 在 网 页 设计 中 ， 颜 色 的 十 六 进 制 值 有 多 个 ， 读 者 可 以 从 网 | 用 CS 

上 获取 具体 颜色 的 对 应 值 。 也 可 以 在 Dreamweaver 中 选择 某 元 素颜 

色 后 ， 通 过 查看 其 代码 的 方法 获取 此 颜色 对 应 的 十 六 进 制 值 。 ——nl 

Dreamweaver 方法 获取 十 六 进 制 颜色 值 的 操作 方法 如 图 17-7 所 示 。 E-6 AA 
(2) ERA FIZA T thn EUM, Pn Jë 0) a  —áx XS ES 


符 «gy» I 
= Xv Sew XFO SFD AS TUO EHO 
CA CER drm Gub |BE| Spry | ZE ERR = 
* = | m ə m-2- m 2G 5-o-B-G 
选中 要 添加 
颜色 的 文本 。 
1l  «!DOCTYPE html PUBLIC "-//W3C/ 
e "http: //www.w3.orqg/TR/xhtmll/D 
z «html xmlns-"http:.//ww.w3.org 
3 <head> 
s. E ` =a I miscere 可 一 EDS Š 4 «meta http-equiv-"Content-Type 
5 <-titLe> 无 标题 文档 <- /title> 
50 «style type="text/css"> 
m !-- [ore neis i 
8 .STYLEZ,[color: #0033CC} ! 
q --- L 一 一 一 一 一 表 一 一 一 一 一 一 ] 
10 x/style» 
"- 代码 中 的 十 六 
设计 界面 中 的 进 制 值 


十 六 进 制 值 


EL 可 
Wi okon mem Ls as wa n 


— — — cmm je) 


图 17-7 Dreamweaver 获取 颜色 值 流程 图 


438 Eg: 


第 17 章 使 用 HTML 5+CSS 3 开发 商业 站 点 实例 
2. 长 度 单位 
在 CSS 中 常用 的 长 度 单位 有 如 下 两 种 : 
(1) 绝对 长 
常用 的 绝对 长 度 单位 如 表 17-2 所 示 。 
表 17-2 常用 绝对 长 度 单位 列表 

£ K Hox 名 K Hox 

in 英寸 cm 厘米 

mm 毫米 pt 磅 

m 米 pc pica 
ER CSS 长 度 单位 和 现实 中 测量 用 的 长 度 单位 一 样 。 其 中 ,“pt”( 磅 ) A "pc" (pica) 

是 标准 印刷 72 pt=1 in, 1 pc=12 pt. 

(0 相对 长 度 单位 
在 网 dis bind EE 


Q 字体 大 小 : 
em 的 功能 是 


, 


Hb Xe “font-size”( 文 字 大 小 ) 的 值 
定义 的 文字 大 小 为 12 pt， 那 么 对 于 这 个 文本 元 素来 说 ，1 em 就 是 12 pt 


际 大 小 是 受 字 体 尺 寸 影响 的 。 
口 文本 高 度 : e 


"ex" JI "em" m Xf 


E 是 定义 文本 中 元 素 的 高 度 。 和 “em” 


一 样 ， 


度 是 不 同 的 ， 所 以 “ex” 的 实际 大 小 也 受 字体 和 字 尺 十 的 影响 。 


O 像素 : px 


in “px” 是 网 页 设计 
中 的 每 个 单元 格 就 是 
有 一 个 100 px 大 小 的 字符 ， 
而 在 1024 X768 分 辩 率 的 屏幕 上 ， 字 符 显示 宽度 是 屏幕 


格 ， 其 


最 为 常用 的 长 度 单位 。 


在 800X600 分 辩 率 的 屏幕 上 ， 字符 1 


fp Sion 


其 中 最 为 常用 的 相对 长 度 单位 如 下 。 


。 例 如 ， 在 页 面 中 对 某 文本 
。 也 就 是 说 ，em 的 实 


因为 不 同 字 的 高 


， 界 面 将 被 划分 为 多 个 单元 


:一 个 像素 。 像 素 “px” 的 具体 大 小 是 和 屏幕 分 辨 率 有 关 的 。 例 如 


会 以 为 字 变 小 了 。 如 图 17-8 所 示 。 


要 使 用 CSS 呀 


图 17-8 100px 大 小 的 字符 在 不 同 分 辨 率 的 


直 和 另外 一 个 值 


翌 幕 上 的 显示 效果 


的 数值 之 一 ， 其 书写 格式 如 下 。 


显示 宽度 是 屏幕 宽度 的 1/8; 
宽度 的 110， 从 视觉 角度 看 ， 浏 览 


的 对 比 得 到 。 例 如 ， 一 个 元 素 的 


宽度 为 200px， 如 定义 在 它 里 面 的 子 元 素 的 宽度 为 20%， 则 此 子 元 素 的 实际 宽度 为 40px。 


3. 百分比 值 
百分比 值 是 网 页 设计 中 和 党 
数字 %。 
这 里 的 数字 可 正 可 负 。 
在 页 面 设计 中 ， 百 分 比值 需要 通过 一 个 1 
4. URL 
URL 是 统一 资源 定位 符 的 缩写 ， 是 指 一 个 文件 、 


文档 或 图 片 等 对 象 的 路 径 ，i 


通过 这 个 路 
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径 用 户 可 以 获取 此 对 象 的 信息 。 使 用 URL. 的 语法 格式 如 下 。 


url (ETE) 


这 里 的 “路 径 ” 
别 介绍 。 
(1) 相对 路 径 


是 对 象 存 放 路 径 。URL 路 径 分 为 相对 路 径 和 绝对 路 径 两 种 ， 在 下 面 将 分 


相对 路 径 是 指 , 相对 于 某 文件 本 号 所 在 位 置 的 路 径 。 例 如 , A CSS 文件 和 文人 
的 图 片 处 在 同一 目录 下 ， 当 CSS 给 此 图 片 设置 某 种 样式 时 ， 可 以 使 用 如 下 代码 : 


body {background:url(2.jpg);} 


在 上 述 代码 中 ， 


\ == 
ES: 


“2.jpg” 是 相对 于 CSS 文件 的 路 径 。 


FA 为 “2.jpg » 


O 4 HTML (XHTML) 中 使 用 相对 路 径 时 ， 是 相对 于 CSS 文件 ， 而 不 是 相对 于 HTML 
(XHTML ) 页 面 文件 本 身 。 
口 代码 中 url 和 后 面 的 括号 “% ”之 间 不 能 有 空格 ， 否 则 功能 失效 。 


(2) 绝对 路 径 


绝对 路 径 是 指 ， 


body (background:url(http://www.sohu.com/sports/guoji/2.jpg); | 


在 上 述 代码 中 ， 
5. CSS 默认 值 


CSS 的 默认 值 是 二 


网 址 表示 图 片 的 实际 存放 路 径 。 


览 器 中 是 “0”， 而 在 opera 浏览 器 中 是 8px。 


17.1.6 ”网 页 中 的 


CSS 应 用 


H» 在 页 面 中 没有 定义 茶 属 性 值 时 的 取 值 , CSS H 
或 “0”。CSS 的 默认 值 和 所 使 用 的 浏览 器 有 关 。 例 如 ，<body> 元 素 的 默认 补 


某 对 象 放 在 网 络 空间 中 的 绝对 位 置 ， 是 它 的 实际 路 径 。 例 如 ， 如 下 代码 
使 用 了 绝对 路 径 来 调用 某 图 片 。 


的 基本 默认 值 是 “none” 
白 属 性 值 在 正 浏 


在 网 页 中 添加 CSS 的 方法 和 将 CSS 添加 到 XTML 文件 中 的 方法 类 似 。 本 节 将 对 页 面 调 
用 CSS 的 方式 和 使 用 CSS 优先 级 等 知识 进行 简要 介绍 。 


1. 页 面 调 用 CS 


S 方式 


在 页 面 中 通常 使 用 如 下 5 种 方法 调用 CSS. 
(1) 链接 外 部 CSS 样式 表 


链接 外 部 CSS 样式 表 方 法 是 指 在 “<head></head> ”标记 内 使 有 


日 <link> 标 记 符 1 


周 用 外 部 CSS 


FEX A OPE CSS 外 部 文件 , 则 在 网 页 中 用 下 列 代码 即 可 将 CSS 文档 引入 ,然后 在 <body> 


部 分 直接 使 用 CSS r 


<head> 


PIE XL. 


«meta http-equiv-" Content-Type" content-"text/html; charset-utf-8" /> 
<title> 无 标题 文档 </title> 
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<link href-"style4.css" rel="stylesheet" type="text/css" /> 
</head> 


注意 : 使 用 此 方法 时 , 外 部 样式 表 不 能 含有 任何 像 <head> 或 <style> 这 样 的 HTML 的 标记 ， 
并 且 样 式 表 仅仅 由 样式 规则 或 声明 组 成 .。 

(2) 文档 中 植 入 

文档 中 植 入 法 是 指 通过 <style> 标 记 元 素 将 设置 的 样式 信息 作为 文档 的 一 部 分 用 于 页 面 
中 。 所 有 样式 表 都 应 列 于 文档 的 头 部 ， 即 包含 在 <head> 和 </head> 之 间 。 在 <head> 中 ， 可 以 
包含 一 个 或 多 个 <style> 标 记 元 素 , 但 须 注 意 <style> 和 </style> 成 对 使 用 ， 并 注意 将 CSS 代码 置 
于 “<!--” 和 “-->” 之 间 。 

请 看 下 面 的 演示 代码 。 


<head> 
«meta http-equiv="Content-Type" content="text/html; charset-utf-8" /> 
<title> 这 里 是 我 的 标题 </title> 
«style type="text/css"> 
sz 
.STYLE1 {/* 页 面 内 定义 样式 */ 
color: #990000; 
font-size: 24px; 


} 

s 

</style> 

<body> 

«span class="STYLE1"> RH CSS 样式 </span><!-- 调 用 样式 显示 --> 
</body> 


执行 后 的 效果 如 图 17-9 所 示 。 
miro [e) =] EJ 921 [ie > S sec FJ tz 


我 的 CSS 样 式 


Em OOO T sola 7 
图 17-9 执行 效果 

注意 : 

O 如 果 浏 览 器 不 能 识别 <style> 元 素 ， 就 会 将 其 作为 <body> 元 素 的 一 部 分 照常 展示 其 内 
容 ， 从 而 使 这 些 样 式 表 对 用 户 是 可 见 的 。 为 了 防止 出 现 这 种 情况 ， 建 议 将 <style> 元 素 
的 内 容 要 包含 在 一 个 注解 “<!--” 和 “-->” 里 面 ， 像 上 述 例子 那样 。 

口 当 一 个 文档 具有 独特 样式 的 时 候 ， 可 应 用 讽 入 的 样式 表 。 如 果 多 个 文档 都 使 用 同一 样 
式 表 ， 则 链接 外 部 CSS 样式 表 方 法 更 适用 。 

(3) 页 面 标记 中 加 入 

页 面 标记 中 加 入 是 指 ， 在 某 个 标记 符 的 属性 说 明 中 加 入 设置 样式 的 代码 。 例 如 ， 如 下 代 
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码 使 用 此 方法 对 文字 进行 了 设置 。 


<title> 这 里 是 我 的 标题 </title> 
<body> 


<H1 STYLE="color:#990033;font-family:Arial"> 我 的 样式 </h1><!-- 加 入 样式 --> 


</body> 


(4) 导入 CSS 样式 表 


使 用 @import url 选择 器 可 以 导入 第 三 方 样式 表 ， 其 实现 方法 类 似 于 链接 <link>。 它 可 以 
放 在 HTML 文档 的 <style> 与 </style> 标 记 符 之 间 ， 与 <link> 的 区 别 在 于 无 论 该 网 页 是 否 应 用 了 


CSS 样式 表 ， 它 都 将 读 取样 式 表 ; 而 <link> 只 有 在 该 网 页 应 用 CSS P 
下 面 代 码 说 明了 @import 选择 器 的 使 用 方法 : 


<HEAD> 

<Style type="text/css"> 

<!-- 

@import url(http://www.html.com/style.css);/* 13 HH FERK HER 46*/ 
TD í background: yellow; color: black } 

eS 

</style> 

<HEAD> 


(5) 脚本 运用 CSS 样式 


f 式 表 时 ， 才 去 读 样式 表 。 


在 DHTML 页 面 中 ， 可 以 使 用 脚本 语句 来 实现 CSS 的 调用 。 当 DHTML 页 面 结 合 使 用 内 
IWJ css RAS ES BALA SEMPER, W AERE EpezE EIE AUR, uz oa E 
体 、 颜 色 、 背 景 、 文 本 属性 等 。 例 如 ， 在 如 下 代码 中 将 页 面 中 的 文本 颜色 进行 了 设置 ， 当 鼠 


标 移动 到 文本 上 面 时 字体 为 红色 ， 离 开 文 本 时 字体 为 绿色 。 
执行 效果 如 图 17-10 所 示 。 


<title> 这 里 是 我 的 标题 </title> 


Abo te Amp AF205 
LSSPAN onMouseOver-"this.style.color-'red" onMouseOut="this.style.color=#0000CC"> | 
变 为 红色 

«SPAN» — 7 s IN 本 

<body> 鼠标 离开 时 的 颜色 脚本 设置 文本 样式 鼠标 放 上 时 的 颜色 


加 这 里 是 所 的 标题 - Microsoft Internet Exp... BM[SI ES 
SED SEV KEW TR” P 


J O Ad cose T> 


Es) dE ”| QS st E] er 


Si 


kes [ | [ | [gem 7 


Bal | [ [ [ [99mm 


图 17-10 执行 效果 
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2. 调用 优先 级 


上 述 儿 种 常用 的 页 面 调 用 方法 ， 在 具体 使 用 时 ， 其 作用 顺序 是 不 同 的 。 本 节 重 点 向 读者 
介绍 几 种 通常 所 遵循 的 优先 级 样式 。 

(1) 通用 优先 级 

一 般 来 说 ， 在 页 面 元 素 中 直接 使 用 的 CSS 样式 


定义 的 CSS 样式 ， 


(2) 类 型 选择 符 和 类 选择 符 


最 后 是 使 用 链接 形式 调用 的 样式 


是 最 高 的 优先 级 样式 ， 其 次 是 在 页 面 头 部 


o 


在 页 面 中 同时 使 用 类 型 选择 符 和 类 选择 符 时 ， 类 选择 符 的 优先 级 要 高 于 类 型 选择 符 。 也 
就 是 说 ， 要 首先 遵循 类 选择 符 ， 然 后 再 遵循 类 型 选择 符 。 

(3) ID 选择 符 

在 页 面 设计 中 ，ID 选择 符 的 优先 级 要 高 于 类 选择 符 。 


(4) 最 近 优 先 原则 


最 近 优 先 原则 是 在 页 面 设计 中 所 遵循 的 原则 。 例如， 如 果 某 元 素 的 ID 选择 符 被 定义 在 其 


父 元 素 中 ， 那 么 其 


父 元 素 会 使 用 最 近 定义 的 样式 。 


17.1.7 CSS 的 编码 规范 


CSS 的 编码 规范 是 指 ， 在 书写 CSS 编码 时 所 遵循 的 规范 。 虽 然 以 不 同 的 书写 方式 对 CSS 
的 样式 本 身 并 没有 什么 影响 ， 但 是 按照 标准 格式 书写 的 代码 会 更 加 便于 阅读 ， 有 利于 程序 的 


维护 和 调试 。 本 节 
1. 书写 规范 


在 网 页 设计 过 程 中 ， 标 准 的 CSS 书写 规范 主要 包括 如 下 两 个 方面 。 


(1) 书写 顺序 


将 介绍 CSS 样式 的 书写 规范 知识 


° 


在 使 用 CSS 时 , 最 好 将 CSS 文件 单独 书写 并 保存 为 独立 文件 , 而 不 是 把 其 书写 在 HTML 


L 


页 面 中 。 


这 样 做 的 


书写 自 定 义 选择 符 
(2) 书写 方式 


在 CSS 中 ， 虽 然 在 不 违反 语法 格式 


好 处 是 ， 便 于 CSS 样式 的 统一 管 : 
在 编码 时 ， 建 议 读者 先 书写 类 型 选择 符 和 重复 使 用 的 样式 ， 然 后 再 书写 伪 类 代码 ， 最 后 


理 ， 便 于 代码 的 维护 。 


。 这 样 做 的 好 处 是 ， 便 于 在 程序 维 


护 时 的 样式 查找 ， 提 高 工作 效率 。 


r 


的 前 提 下 使 用 任何 的 书写 方式 都 能 正确 执行 。 但 还 是 


建议 读者 在 书写 每 一 个 属性 时 ， 使 用 换行 和 缩 进来 书写 。 这 样 做 的 好 处 是 ， 使 编写 的 程序 一 


目 了 然 ， 便 于 程序 


的 后 续 维护 。 例 如 如 下 代码 : 


<style type="text/css"> 


<l 
.STYLE1 í 


font-size: 18px;/* 使 用 换行 和 缩 进 */ 


color: 


#990033; 


font-family: Arial, Helvetica, sans-serif; 


j 


--> 


</style> 
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<body> 

«span class="STYLE1"> 变 为 红色 
</SPAN></span> 

</body> 


注意 : 

在 书写 CSS 代码 时 ， 应 该 注意 如 下 3 点 。 

口 CSS 属性 中 的 所 有 长 度 单位 都 要 注 明 单位 ，“0” 除 外 。 

口 所 有 使 用 的 十 六 进 制 颜色 单位 的 颜色 值 前 面 要 加 上 "P A. 

口 充分 使 用 注释 。 使 用 注释 后 ， 不 但 使 页 面 代 码 变 的 更 加 清晰 易 懂 ， 而 且 有 助 于 开发 人 

员 的 维护 和 修改 。 

2. 命名 规范 

命名 规范 是 指 ，CSS 元 素 在 命名 时 所 要 遵循 的 规范 。 在 制作 网 页 过 程 中 ， 经 常 需要 定义 
大 量 的 选择 符 。 如 果 没 有 很 好 的 命名 规范 ， 会 导致 页 面 的 混乱 或 名 称 的 重复 ， 造 成 不 必要 的 
有 麻烦。 所以，CSS 在 命名 时 应 遵循 一 定 的 规范 ， 使 页 面 结构 最 优化 。 

在 CSS 开发 中 ， 通 常 使 用 的 命名 方式 是 结构 化 命名 方法 。 它 相对 于 传统 的 表现 效果 命名 
方式 来 说 要 优秀 得 多 。 例 如 ， 当 文字 颜色 为 蓝 色 时 ， 使 用 “blue” 来 命名 ; 当 某 页 面 元 素 位 于 
页 面 中 间 时 ， 使 用 “center” 来 命名 。 se se ds 但 是 这 种 方 
法 不 能 达到 标准 布局 所 要 求 的 页 面 结构 和 效果 相 分 离 的 要 求 。 而 结构 化 命名 方式 结合 了 表现 
效果 的 命名 方式 ， 实 现 样 式 命名 所 以 ， 用 户 应 选择 弓 rr 书写 编码 。 

例如 ， 如 下 命名 方式 就 是 遵循 了 结构 化 命名 方式 ; 

口 体育 新 闻 :，sports-news。 

口 后 台 样 式 : admin-css。 

口 左 侧 导航 : left-daohang。 

使 用 结构 化 命名 方法 后 ， 不 管 页 面 内 容 放 在 什么 位 置 ， 其 命名 都 有 同样 的 含义 。 同 时 它 
可 以 方便 页 面 中 相同 的 结构 ， 重 复 使 用 样式 ， 节 省 其 它 样式 的 编写 时 间 。 表 17-3 中 列 出 了 党 
用 页 面 元 素 的 命名 方法 。 


a" 


表 17-3 常用 CSS 命名 方法 


页 面 元 素 名 称 页 面 元 素 名 称 
主导 航 mainnav 子 导航 subnav 
页 脚 foot J content 
头 部 header 底部 footer 
商标 label 标题 title 
顶部 导航 topnav 则 栏 sidebar 
左 侧 栏 leftsidebar 右 侧 栏 Tightsidebar 
标志 logo 标语 banner 
子 菜单 submenu 注释 note 
容器 container 搜索 Search 
登陆 login 管理 admin 
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因为 具体 页 面 的 使 用 目的 不 同 ， 所 以 并 没有 适合 所 有 页 面 的 国际 命名 规范 。 在 开发 过 程 
中 ， 只 要 遵循 Web 标准 所 规定 的 “结构 和 表现 相 分 离 ” 这 一 原则 ， 做 到 命名 合理 即 可 。 


17.1.8 CSS 调试 


CSS 调试 是 指 对 编写 后 的 CSS 代码 进行 调整 , 确保 达到 自己 


,满意 的 效果 ,在 使 用 CSS 时 ， 


经 常 出 现 显 示 效 果 和 设计 预想 的 效果 不 一 样 ， 造 成 效果 的 差异 ， 


或 者 出 现代 码 错误 。 造 成 上 


述 结果 的 原因 很 多 ， 有 可 能 是 设计 者 一 时 大 意 而 书写 错误 ， 或 者 是 由 于 属性 之 间 的 冲突 而 造 


成 的 。 当 出 现 上 述 页 面 表现 错误 时 ， 就 需要 进行 CSS 调试 ， 找 H 


读者 介绍 CSS 的 基本 调试 知识 。 
1. 设计 软件 调试 


使 用 Dreamweaver 调试 是 最 简单 的 软件 调试 方法 。 作 为 主流 的 网 页 制作 工具 ， 


错误 的 真正 原因 。 本 节 将 向 


Dreamweaver 能 很 好 地 实现 设计 代码 和 预览 界面 的 转换 。 设 计 者 可 以 迅速 的 在 Dreamweaver 
设计 界面 中 进行 代码 调整 ， 然 后 在 浏览 器 中 查看 显示 效果 。 通 过 上 述 方 法 可 以 很 好 地 实现 代 


人 码 和 效果 的 统一 ， 从 而 快速 的 找到 问题 所 在 。 


另外 ， 也 有 一 部 分 错误 是 因为 浏览 器 之 间 的 差异 造成 的 。 这 就 需要 进行 多 个 浏览 器 的 检 


测 ， 确 定 真正 问题 所 在 。 
2. 继承 性 和 默认 值 带 来 的 问题 


在 页 面 测试 时 ， 经 常 出 现 如 下 情况 : 页 面 中 的 某 元 素 没 有 任何 指定 样式 ， 在 显示 效果 中 
却 体 现 了 某 种 其 他 指定 样式 。 造 成 上 述 问题 的 原因 可 能 是 ， 这 个 元 素 继承 了 其 父 元 素 的 属性 。 


例如 ， 如 下 代码 由 于 继承 性 问题 而 产生 弄 常 显示 效果 。 


<title> 这 里 是 我 的 标题 </title> 

«style type="text/css"> 

=I 

.STYLEI {font-size: 18px} 

> 

</style> 

<body style="color:#990000"> 

«span class="STYLE1'"> 看 我 的 样子 </span> 
</body> 


执行 后 会 发 现 执行 效果 继承 了 <body> 元 素 样 式 ， 如 图 17-11 


tit o) Te EJ a wm ps 国 t> | 


看 我 的 样子 


J 
7 


CE E 7757771 


图 17-11 执行 效果 


所 示 。 
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在 上 述 代码 中 ， 通 过 样式 <STYLE1> 设 置 了 文本 大 小 为 18px。 在 显示 后 的 效果 图 中 ， 文 
本 文字 的 显示 效果 却 是 颜色 为 红色 、 文 字 大 小 为 18px。 造 成 上 述 问 题 的 原因 是 ， 在 代码 中 设 
置 了 <body> 元 素 的 颜色 属性 为 红色 ，<body> 元 素 将 其 样式 继承 给 了 它 的 子 元 素 <span>。 

解决 上 述 问 题 的 方式 是 ， 重 新 定义 相关 属性 来 覆盖 继承 样式 和 默认 样式 。 另 外 ， 合 理 地 
设计 出 清晰 的 代 套 结构 样式 ， 是 解决 上 述 问 题 的 根本 。 

(3) 背景 颜色 寻找 错位 

为 准确 定位 到 页 面 的 出 错 区 域 ， 可 以 向 某 页 面 元 素 添 加 背景 颜色 ， 来 判断 正在 修改 的 代 
码 是 否 是 目前 正在 影响 页 面 中 的 内 容 。 另 外 ， 可 以 充分 利用 CSS 的 一 些 常 用 边框 属性 ， 例 如 
“style-width:1”、“border-color:red” 和 “border-style:solid” 来 定位 出 错 区 域 。 具 体 方法 是 给 块 
加 入 一 个 外 边框 ， 一 开始 的 边框 比较 大 ， 然 后 逐渐 缩小 范围 ， 就 很 容易 定位 到 出 错 区 域 了 。 

(4) 第 三 方 软件 调试 

读者 通常 使 用 Dreamwear. IE, Frontpage 同时 进行 调试 工作 ， 上 述 方法 虽然 比较 简单 ， 
日 是 三 者 之 间 的 频繁 转化 让 人 觉得 及 烦 。 第 三 方 软件 调试 是 利用 专用 软件 来 调试 页 面 程序 的 
方法 ， 第 用 的 调试 工具 是 CSSVista。 

CSSVista 是 一 款 Windows (KREE XP 上 使 用 ) 平台 的 第 三 方 、 免 费 的 CSS 编辑 工具 。 
其 主要 功能 就 是 将 Frontpage. IE6 以 及 CSS 编辑 器 集合 到 一 个 框架 里 面 。 可 以 所 见 即 所 得 地 
对 页 面 进行 CSS 调试 。CSSVista 需要 运行 在 Microsofts .NET Framework 2.0 F. 

(5) W3C 校 验 

在 W3C 的 官方 站 点 上 可 以 测试 个 人 设计 页 面 样式 的 标准 化 。 读 者 可 以 登陆 到 http:/jigsaw. 
w3.0rg/css-validator/validator.html， 对 文件 进行 测试 。 其 测试 界面 和 结果 界面 分 别 如 图 17-12 
和 图 17-13 所 示 。 


IHO REO FEV PLO PES IRO B0 
LS EX = 注释 OBERE 


= 


Misc css 只 iE 服务 x 国 
© C|| 图 - == Ctrl-E ESIE O- f 5. Rj t-' 


< @ jigsaw. w3. org/css-val 
ER MEET Cu 


中 新 手 上 路 | 常用 网 址 Css El ip CO 网 页 快讯 库 


Deutsch English Español Francais ẸH20 Italiano Nederlands 日 本 语 Polski Portugués Pyccxwñ (3 Svenska 6bnrapcm yrpaincbka Čeština Romanian Magyar ENnvk6 RA 简体 中 文 


WC CSS Validation Service 


答 查 屋 本 样式 表 (C 档 和 HTML 或 者 XHTML 文档 中 的 CSS 内 容 


通过 指定 URI akh 。 通过 直接 输入 
验证 指定 URI 的 CSS 内 容 

输入 你 想 验证 的 文档 ( 带 CSS 的 HTML 文 档 或 者 CSS 文 档 ) 的 URL 
URI 地 址 
， 更 多 选项 


Check 


Wr am VALIDATOR Ty now the W3C Validator Suite™ premium service that checks your entire website and evaluates its conformance with W3C open 
“3 Suite standards to quickly identify those portions of your website that need your attention. 


The W3C validators rely on community support for hosting and development. 


4564 
Donate and help us build better tools for a better web : 


图 17-12 W3C 测试 界面 
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rit MRD SEV AONT anon 
Om Q Hage veseex e| 2: 2 8-LI < 3 


HEO |£) k: \W3c css 校 验 器 结果 : http--www_goodTTT_en. htm [5 Ez] [s 可 @ Snaglt ty 


CSS 校 验 器 结果 : 


http://www.good777.cn/ 
没有 找到 错误 或 警告 | 
恭喜 恭喜 

MEESE, orte den 


为 了 告诉 你 的 访客 你 曾 致力 于 建立 交互 性 的 网 页 你 可 以 显示 这 个 图 标 在 任意 经 过 检验 的 
网 页 上 。 这 里 是 你 用 作 加 入 图 标 到 你 的 网 页 上 的 HTML 代 码 ， 


<p> 
<a href="htt] id //3 igsaw.w3.org/css-validato: pdt 
<img Serie er :0; viata: Sap zhe ight: 31p 
RE BH igsaw. w3.org/c ali dato a s/vcss" 
alt-"Valid Cis! " /> 


/a 
</p> m 
E [ Í| Í | [Í gne 4 


F17-13 W3C 测试 结果 界面 
在 网 页 设计 过 程 中 ，W3C 可 以 通过 如 下 3 种 方式 进行 测试 。 
口 通过 指定 URL. 

口 通过 文件 上 传 。 

口 表单 直接 输入 测试 。 


12 ”开发 一 个 商业 站 点 


本 节 将 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲解 联合 使 用 HTML 5+ CSS 3+<div> 技 术 开 
发 大 型 商业 网 站 的 方法 。 在 讲解 过 程 中 ， 对 整个 站 点 的 实现 流程 进行 了 详细 介绍 ， 读 者 可 以 
直接 将 实例 中 的 一 些 技巧 应 用 到 自己 的 项 目 中 去 。 


17.2.1 ”网 站 规划 
网 站 规划 是 制作 网 站 的 第 一 步 ， 规 划 阶 段 的 任务 主要 有 如 下 几 点 : 
口 站 点 需求 分 析 
口 预期 效果 分 析 
口 站 点 结构 规划 
下 面 将 对 上 述 任务 的 实现 进行 简要 介绍 。 


17.2.2 ”站 点 需求 分 析 
本 实例 是 一 个 化 妆 品 代购 网 站 ， 作 为 一 个 典型 的 商业 站 点 ， 必 需 具 备 如 下 的 功能 模块 。 
(1) 系统 主页 
利用 互联 网 这 个 平台 ， 设 计 一 个 美观 大 方 的 页 面 作为 系统 主页 ， 在 主页 中 展现 最 新 、 最 
畅销 的 产品 类 型 ， 并 附 上 相应 的 产品 介绍 。 
(2) 产品 展示 
在 本 页 面 中 展现 出 系统 内 的 所 有 商品 , 每 个 产品 以 图 文 并 成 的 方式 展现 在 浏览 用 户 面前 。 
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(3) 关于 我 们 

为 了 消除 购买 者 对 网 购 的 后 顾 之 忧 ， 特 意 介 绍 了 系统 对 购物 者 的 保证 和 质保 说 明 ， 为 大 
家 提供 一 个 轻松 愉悦 的 购物 环境 。 

(4) 我 的 博客 

在 博客 页 面 展现 店主 的 风采 ， 记 录 店 主 和 企业 在 生活 中 的 点 点 滴 滴 ， 和 在 线 用 户 构 建 一 
个 和 谐 健 康 的 交流 平台 。 

(5) 联系 我 们 

本 页 面 提供 了 企业 和 负责 人 的 联系 信息 ， 十 分 详细 。 如 果 有 变更 ， 则 需要 及 时 进行 更 新 。 


17.2.3 ”预期 效果 分 析 


对 于 一 个 Web 站 点 来 说 ， 最 为 重要 的 是 首页 的 制作 效果 。 作 为 站 点 的 门户 ， 首 页 应 该 做 
到 美观 大 方 ， 本 实例 网 站 首页 的 预期 效果 如 图 17-14 所 示 。 


图 17-14 系统 首页 预期 效果 图 
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“产品 展示 ”页 面 是 系统 的 


期 显示 效果 如 图 
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级 页 面 ， 


17-15 所 示 。 


将 以 图 文 并 成 的 样式 显示 系统 内 的 产品 信息 


H Tl 


W 


KJET 600g 


“关于 我 们 ”页 面 的 预期 显 


贷 邮 费 该 hd 
S: mm 


退货 
SKERA 


上 ， 谁 的 


示 效 果 如 图 


任 谁 承 担 ， 


图 17-15 ”产品 展示 页 页 再 


详细 解释 请 点 此 查看 。 


17-16 所 示 。 


例如 : 


常见 情况 一 : 商品 质量 问题 、 实 物 与 


题 物 与 描述 
+ 任 导 致 的 ， 邮 咒 卖 家 承担 ; 常见 情况 二 : X 旬 选 合适 或 者 不 喜欢 需要 人 退货， 邮费 买 家 承担 。 但 是 淘 小 二 
知道 有 时 候 交 易 纠纷 的 邮 鄙 争议 并 没有 那么 简单 ， 会 有 些 不 诚信 的 买 家 或 者 卖家 拒绝 去 承担 相关 的 邮 趣 ， 遇 到 此 类 情况 ， 建 
起 维权 ， 由 人 工 客服 来 帮助 协调 处 理 。 当然 ， 邮 缉 的 价值 有 时 候 并 不 高 ， 若 双方 能 各 退 一 步 ， 友 好 协商 处 理 当然 


家 们 改 〈 买 家 退货 后 ) " 退 未 状态 下 ， 


识 的 订单 指 的 


是 电器 城 被 打上 人 所 


4E ， 等 待 卖 5 22:1 


是 最 好 的 。 


HAU RRAS S 


有 了 杂音。 (Q). 


2013 年 9 月 1 


二 章 售 中 争议 处 理 规范 


国宝 将 基于 普通 人 的 判断 ， 


第 三 


《 且 维权 相对 方 认 可 ) Br 


=, 


做 出 的 争议 处 理 结果 承担 任何 


日 生效 ， 带 有 " 电 "标识 的 订单 ， 


对 任 证 /证 据 的 鉴别 能 力 及 对 争议 的 


标的 订单 : 未 


5 


a^ tei iT 


RS 28 E UE ET EUR 


“标的 订单 ， 


以 及 除 电 器 城 以 外 的 所 


根据 本 


责任 。 


图 17-16 关于 我 们 页 面 


“我 的 博客 ”页 面 的 预期 


显示 效果 如 图 


日 起 5 天 内 ， 


修改 为 3 天 内 ”。 


规范 的 规定 对 买卖 双方 的 争议 做 出 处 理 。 部 分 买卖 双方 的 争议 ， 维 权 发 起 方 有 权 选 择 
评审 员 进 行 判断 ， 淘 宝 网 将 根据 大 众 评 审 员 的 判断 结果 对 该 等 争议 作出 处 理 EXE IET 
处 理 能 力 有 限 ， 淘 宝 不 保证 争议 处 理 结 果 符 合 买 家 和 (或 ) 卖 家 的 期 望 ， 也 不 对 依据 本 规范 


期 效果 图 


17-17 所 示 。 
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This is just a place holder. 


Archive 
This website template has been collect from zzsc for you, for free 
v 4 2023 
You can replace all this text with your own text. You can remove any link to our website 
from this website template, you're free to use this website template without linking back to 
A 2023 

us. If you're having problems editing this website template, then don't hesitate to ask for us 
help on the Forum 

2023 

2023 


This is just a place holder. 


This website template has been collect from zzsc for you, for free 

You can replace all this text with your own text. You can remove any link to our website 
from this website template, you're free to use this website template without linking back to 
us. If you're having problems editing this website template, then don't hesitate to ask for 


help on the Forum 


VR] 


17-17. 我 的 博客 页 面 预期 效果 图 


17.2.4 ”站 点 结构 规划 
根据 17.2.1 和 17.2.2 的 分 析 ， 可 以 得 出 整个 站 点 的 系统 结构 如 图 17-18 所 示 。 


化 妆 品 代购 


图 17-18 ”站 点 结构 规划 图 


17.2.5 ”设计 系统 首页 文件 


本 系统 实例 的 系统 主页 文件 是 index.html， 具 体 实现 流程 如 下 。 

(1) 设计 顶部 导航 界 阳 

插入 一 个 名 为 “header” 的 <div>， 然 后 在 顶部 插入 一 幅 素 材 图 片 <div>， 在 下 面 分 别 设置 
主页 、 产 品 展示 、 关 于 我 们 、 个 人 博客 、 联 系 我 们 共 5 个 导航 链接 。 具 体 代码 如 下 。 


«div id="header"> 
<div> 
«div id="logo"> 
«a href="index.html"><img src-"images/logo.png" alt="LOGO"></a> 
</div> 
<ul id="navigation"> 
<li class="selected"> 
<a href="index.html"> 主 页 </a> 
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</div> 


</div> 
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</li> 
<li> 

<a href="shop.html"> 产 品 展 示 </a> 
</li> 
<li> 

<a href="about.html"> 关 于 我 们 </a> 
</li> 
<li> 

<a href="blog.html"> 个 人 博客 </a> 
</li> 
<li> 

<a href="contact.html"> 联 系 我 们 </a> 
</li> 


执行 后 的 效果 如 图 17-19 所 示 。 


(2) 设计 中 间 内 容 界 面 ， 扣 
口 首先 在 上 方 插 入 一 幅 名 为 “summer-nymph.png” 的 图 


图 17-19 ”顶部 导航 


O 然后 使 用 <p></p> 标 记 输 入 一 段 文本 。 
口 接着 插入 一 个 名 为 “featured” 的 <div>。 


C) 通过 <u> 和 <li> 列 表 标 记 连 续 插 入 三 个 图 文 并 茂 的 产品 信息 。 
k 体 实现 代码 如 下 。 


«div id="contents"> 


个 平台 将 化 妆 品 的 功效 、 包 装 、 规 格 等 相关 专业 知识 展示 给 


<div id="adbox"> 


入 一 个 名 为 “contents” 的 <div>， 有 基体 实现 流程 如 下 。 


Fo 


«img src="images/summer-nymph.png" alt="Img"> 


<p> 


化 妆 品 招商 网 是 一 家 权威 的 化 妆 品 招商 网 站 , 主要 提供 全 国 范围 内 的 化 妆 品 招商 、 
化 妆 品 代理 、 化 妆 品 加 盟 、 化 妆 品 批发 等 网 络 服务 ， 是 化 妆 品 生产 企业 和 化 妆 品 区 域 代理 商 之 间 合 作 的 桥梁 。 
化 妆 品 招商 网 充分 借助 于 网 络 这 个 快捷 方便 的 平台 ， 将 化 妆 品 生产 企业 的 化 妆 品 在 网 络 上 展示 ， 通 过 网 络 这 


区 域 化 妆 品 代理 商 和 消费 者 。 以 通过 VDP 化 妆 品 


招商 网 这 个 网 络 平台 达到 化 妆 品 广 家 产品 招商 、 区 域 代 理 商 寻找 化 妆 品 进行 代理 的 目的 ， 让 化 妆 品 更 好 地 服 


i 


F 广 大 消费 者 ， 让 招商 工作 更 方便 快捷 地 进行。 
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</p> 
</div> 
«div id="featured"> 
<ul> 
<]> 
«a href="index.html"><img src="images/stare.jpg" alt="Img"></a> 
<p> 


要 拥有 紧 致 饱满 的 肌肤 吗 ? Ye EE RR AA SE Estee Lauder 即时 修 护 
特 润 精华 露 ， 肌 肤 每 刻 杀 历 着 犹如 新 生 般 的 惊喜 改变 ， 无 惯 岁月 流转 ， 青 春水 你 奇 迹 ! 
</p> 
</li> 


<> 


«a href="index.html"><img src-"images/whisper.jpg" alt="Img"></a> 
<p> 


| 由 


抵御 多 种 岁月 痕迹 ， 重 现 青 春 肌肤 ， 缆 含 独特 维 他 纳 新 ， 具 有 持 
久 的 滋润 功能 ， 所 提供 的 全 面 修 护 ， 足 以 取代 各 种 滋润 及 特别 护理 产品 
</p> 
</li> 


dli 
«a href="index.html"><img src-"images/aaa.jpg" alt="Img"></a> 
<p> 


营养 充足 ， 健 康美 丽 喝 出 来 ! HOSERE. RRA KJ 蜂蜜 柚子 茶 
600g， 把 美白 祛斑 的 蜂蜜 柚子 一 口 一 口 地 吃 进 皮肤 里 ， 嫩 肤 养 闫 ， 再 也 不 怕 电 脑 辐 射 了 ! 
</p> 
</li> 
</ul> 
</div> 
</div> 


此 时 执行 之 后 的 效果 如 图 17-20 所 示 。 


2x 


今日 

让 2 Pes EU. BER pum E UE RAE. E z 

地 吃 进 皮肤 里 ， 嫩 肤 养颜 ， 两 款 包装 随机 发 ki 团购 营养 充足 ， 健 康美 丽 喝 出 

M Pa a TREM. AUCIQU.R. m. RSME. MU. DAR 

M utitur d 高 免疫 力 。 把 美 日 祛斑 的 蜂 密 柚 子 一 口 一 口 地 吃 进 皮 肤 里 ， 嫩 肤 养颜 ， 再 也 不 怕 
De 


玉兰 油 多 效 修 护 霜 50g 


图 17-20 ”执行 效果 
452 m 
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(3) 设计 底部 导航 界面 ， 插 入 一 个 名 为 “footer” 的 <div>， 具 体 实现 流程 如 下 。 
口 插入 一 个 名 为 “connect” 的 <div>。 
口 分 别提 供 两 个 和 联系 信息 有 关 的 超级 链接 。 


<div id="footer"> 
«div id="connect"> 
<a href="#" target-" blank" class="facebook"></a><a href="#/" target-" blank" class 
="email"></a><a href="#" target="_blank" class="twitter"></a><a href="#" target="_blank" class="googleplus"> 
</a> 
</div> 
<p> 
&copy; Copyright &copy; 2013.Company name All rights reserved. 
</p> 


</div> 


执行 之 后 的 效果 如 图 17-21 所 示 。 


© Copyright © 2013. Company name All rights reserved. 


图 17-21 执行 效果 


17.2.6 ”设计 产品 展示 页 面 


— 


本 实例 的 产品 展示 页 面 文件 是 shop.html， 具 体 实现 流程 如 下 。 

CD 设计 顶部 导航 界面 ， 本 步骤 和 前 面 172.4 中 的 步骤 (1) 完全 一 样 。 

(2) 设计 中 间 内 容 界面 ， 插 入 一 个 名 为 “contents” 的 <div>， 具 体 实 现 流程 如 下 。 

口 连续 插入 4 个 <div></div> 块 ， 每 个 <div> 块 展示 一 个 产品 。 

O 在 每 一 个 <div> 块 中 ， 在 顶部 插入 一 幅 有 超级 链接 的 图 片 ， 在 中 间 使 用 <h3></h3> 标 记 
设置 产品 的 名 称 ， 在 下 方 使 用 <p></p> 标 记 对 展现 这 款 产 品 的 简介 信息 。 

实现 代码 如 下 。 


«div id="contents"> 
«div id="shop"> 
<div> 
«a href="shop.html"><img src="images/whisper.jpg" alt="Img"></a> 
<h3>KJ 蜂蜜 柚子 茶 600g</h3> 
<p> 


今日 团购 营养 充足 ,健康 美丽 喝 出 来 ! RETH RRI KJ 蜂蜜 柚子 
茶 600g， 富 含 氨 基 酸 、 维 生 素 和 铁 、 锌 、 铺 、 镁 等 多 种 微量 元 素 。 常 饮 之 ， 能 开胃 怡 神 、 驻 颜 美容 ， 
能 强身 健 体 ， 提 高 免疫 力 。 把 美白 祛斑 的 蜂蜜 柚子 一 口 一 口 地 吃 进 皮 肤 里 ， 嫩 肤 养 颜 ， 再 也 不 怕 电 脑 辐 
WT! 两 款 包 装 随机 发 货 。 今日 团购 营养 充足 ， 健 康美 丽 喝 出 来 ! REFAH RRI KJ 蜂蜜 柚子 茶 
600g， 富 含 氨 基 酸 、 维 生 素 和 铁 、 锌 、 铺 、 镁 等 多 种 微量 元 素 。 常 饮 之 ， 能 开胃 怡 神 、 驻 颜 美容 ， 且 能 
强身 健 体 ， 提 高 免疫 力 。 把 美白 祛 贷 的 蜂蜜 柚子 一 口 一 口 地 吃 进 皮肤 里 ， 嫩 肤 养 凑 ， 再 也 不 怕 电 脑 辐 射 
T! 两 款 包 装 随机 发 货 。 
</p> 
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</div> 


<div> 


«a href="shop.html"><img src="images/stare.jpg" alt="Img"></a> 


用 修 护 ， 足 以 取代 各 种 滋润 及 特别 护 型 


团购 2011 年 度 聚 美 优 品 美 妆 风 尚 大 典 一 年 度 最 受 欢 迎 护肤 品牌 ! HC 
持久 的 滋润 功能 ， 所 提供 的 全 面 修 护 ， 足 以 取 
中 ， 焕 发 肌肤 自然 年 轻 光彩 《多 款 包 闭 随 机 发 货 ) ! S 


R 
H 


产品 ! OLAY +. 


<h3> 玉 兰 油 多 效 修 护 霜 50g</h3> 
<p> 
今 目 
御 多 种 岁月 痕迹 ， 重 现 青春 肌肤 ， 列 含 独特 维 他 纳 新 ， 具 有 
各 种 滋润 及 特别 护理 产品 ! OLAY 玉兰 油 多 效 修 护 霜 
团购 2011 年 度 聚 美 优 品 美 妆 风 尚 大 典 一 一 年 度 最 受 欢迎 护肤 品牌 ! 抵御 多 种 岁月 痕迹 ， 重 现 青春 肌肤 ， 蕴 
含 独 特 维 他 纳 新 ， 有 具有 持久 的 滋润 功能 ， 所 提供 的 全 
兰 油 多 效 修 护 霜 ， 焕 发 肌肤 自然 年 轻 光 彩 《〈 多 款 包装 随机 发 货 ) ! 
</p> 
</div> 
<div> 


«a href="shop.html"><img src-"images/enjoy.jpg" alt="Img"></a> 


<h3> 雅 诗 兰 贷 即 时 修 护 特 润 精华 露 50ml</h3> 


<p> 
4H 
润 精华 露 ， 肌 肤 每 刻 亲 历 着 犹如 新 生 般 
贵 一 滴 , 直达 肌肤 年 轻 真 相 ! 多 款 包装 ， 随 机 发 


Ei 


化] 
JA * 


Lauder 即时 修 护 特 润 精华 露 ， 肌 上 肤 每 刻 杀 历 着 犹如 新 生 般 的 


青春 永 你 奇迹 ! 珍贵 一 滴 ， 直 达 肌 肤 年 轻 真相 ! 多 款 
</p> 
</div> 
<div> 


今 


Ei 


H 


购 


Ac | 
JA. 


包装 ， 随 机 发 


fm 


- 


TUE, DRS Habe. IMU 


«a href-"shop.html"7«img src-"images/aaa.jpg" alt="Img"></a> 


«h32 WEAR EHE EED AR 


£) 6.5ml</h3> 


<p> 


^H 


团购 想 要 睫毛 更 长 、 更 密 将 不 


睫毛 的 专用 美容 液 ， 让 每 一 根 上 
吧 ! 今日 团购 想 要 睫毛 更 长 、 更 密 将 不 再 是 梦想 ， 
根 睫 毛 ， 都 绽放 自信 魅力 ! 就 能 立即 拥有 魔法 身 
更 密 将 不 再 
能 立即 拥有 魔法 般 神 奇 的 睫毛 修 护 液 ! 赶快 抢购 | 


奇 


B! 
</p> 
</div> 


</div> 


</div> 


(3) WRR TD, APRA 17.2.4 H 


执行 后 的 效果 如 图 17-22 所 示 。 


454 BH 


E. AKE RIRE! 就 能 并 民 
RETT DHC REBI 0 —W 
的 是 毛 修 护 液 ! 赶快 抢购 吧 ! 


JERR, RARE DHC 睫毛 修 护 液 一 睫毛 的 专用 美容 液 ， 让 每 一 根 轩 


拥有 


d 
魔法 般 神 奇 的 因 


是 梦想 ， 


EE 


购 拥有 紧 致 饱满 的 肌肤 吗 ? 选择 雅 诗 兰 代 Estee Lauder 即时 修 护 特 
的 惊喜 改变 ， 无 惧 岁 月 流转 ， 见 证 10 年 如 初 肌 肤 ， 青 春 永 葆 奇迹 ! 珍 


用 有 紧 致 饱满 的 肌肤 吗 ? 选择 雅 诗 兰 集 Estee 


F 10 年 如 初 肌肤 ， 


IURE DHC 睫毛 修 护 液 一 


EP! 赶快 抢购 


ESI 
今日 团 


的 步 又 G) 完全 一 样 。 


美容 液 ， 让 每 一 
购 想 要 睫毛 更 长 、 


毛 ， 都 绽放 自信 魅力 ! 就 
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KJ 蜂蜜 柚子 茶 600g 
今日 团购 


入、 后 、 镁 等 多 种 侧 旦 元 素 。 


肌肤 ， 萤 含 独特 维 他 
品 ! OLAY 玉 兰 油 多 效 修 护 钉 
美 优 品 美 妆 风尚 大 典 一 一 年度 
新 ， 具有 持久 的 滋润 功能 ， 所 
修 护 箱 ， 米 发 肌肤 自然 年 轻 光 


R 


图 17-22 ”执行 效果 


17.2.7 设计 关于 我 们 页 面 


本 实例 的 产品 展示 页 面 文件 是 about.html， 具 


营养 充足 ， 健 康美 


， 健康 美丽 喝 出 来 ! 味道 香甜 、 酸 殉 的 KJ 蜂 窗 柚子 茶 600g， 


常 饮 之 ， 能 开胃 怡 神 、 驻 颜 美容 ， 且 家 
进 皮 肤 里 ， 嫩 肤 养颜 ， 再 也 不 怕 电 脑 辐 射 了 ! 两 


常 饮 之 ， 能 开胃 怡 神 、 驻 颜 美容 ， 且 能 强身 健 体 ， 


斑 的 蜂蜜 柚子 一 口 一 口 地 吃 进 皮肤 里 ， 嫩 肤 养颜 ， 再 也 不 怕 电 脑 辐射 了 ! 两 款 包 装 随机 发 货 


玉兰 油 多 效 修 护 霜 50g 
今日 团购 ”2011 年 度 聚 美 优 品 美 妆 风 尚 大 典 一 一 年 度 最 受 欢迎 护肤 品牌 ! 抵御 多 种 岁月 痕迹 ， 重 现 青 春 


有 持久 的 滋润 功能 ， 所 提供 的 全 面 修 护 ， 足 以 取代 各 种 滋 泗 及 特别 护理 产 
， 焕 发 肌肤 自然 年 装 随机 发 货 ) ! ”今日 团购 201123 
最 受 欢 迎 护肤 品牌 ! 抵御 多 种 岁月 痕迹 ， 重 现 青春 肌肤 ， 草 含 独特 维 他 纳 
提供 的 全 面 修 护 ， 足以 取代 各 种 滋润 及 特别 护理 产品 ! OLAY 玉 兰 油 多 效 
P (多 款 包 装 随机 发 贷 ) ! 


体 实现 流程 如 下 。 


CD 设计 顶部 导航 界面 ， 本 步骤 和 前 面 17.2.4 中 的 步骤 (1) 完全 一 样 。 
(2) 设计 中 间 内 容 界面 ， 具 体 实现 流程 如 下 所 示 。 


口 插入 一 个 名 为 “contents” 的 <div>。 


O 在 顶部 使 用 <h3></h3> 标 记 设 置信 息 的 标题 , 在 下 方 使 用 <p></p> 标 记 对 展现 对 应 的 详 


细 信 息 。 
具体 实现 代码 如 下 。 


<div id="contents"> 
<div id="about"> 


<h3> 退 货 或 换 货 邮费 该 由 谁 承 担 ? </h3> 


<p> 


买 家 退货 邮费 及 换 货 邮 费 


: 原则 上 , 谁 的 责任 谁 承担 , 详细 解释 请 点 此 查看 。 


常见 情况 一 :商品 质量 问题 、 实 物 与 描述 不 符 等 等 卖家 责任 导致 的 ， 邮 费 卖家 承担 ; 


常见 情况 二 : 买 家 没 选 合适 或 者 不 喜欢 需要 退货 ， 邮 费 买 家 承担 。 


但 是 淘 小 二 知道 有 时 候 交 易 纠纷 的 邮费 争议 并 没有 那么 简单 ， 会 有 些 不 诚信 的 买 家 或 者 卖家 拒绝 


去 承担 相关 的 邮费 ， 遇 到 此 类 情况 ， 建 议 发 起 维权 ， 由 人 -了 


并 不 高 ， 若 双方 能 各 退 一 步 ， 友 好 协商 处 理 当 然 是 最 好 的 。 
</p> 


[客服 来 帮助 协调 处 理 。 当 然 ， 邮 费 的 价值 有 时 候 


<h3> 超 时 时 间 新 增 规则 提示 </h3> 


<p> 
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(D, 2013 年 8 月 16 日 生效 “卖家 不 同意 协议 ,等 待 买 家 修改 ( 买 家 退货 后 )” 


退 款 状态 下 的 超时 规则 
(2D)、 如 “卖家 不 同意 协议 ,等 待 买 家 修改 〈 买 家 退货 后 ) ” 退 款 状态 下 ， 买 家 修改 协议 ， 则 回 到 “ 买 
家 已 退货 ， 等 待 卖 家 确认 ” 退 款 状态 下 的 超时 规则 。 
(3)、 带 有 “ 电 ” 标 识 的 订单 指 的 是 电器 城 被 打上 “ 电 ” 标 的 订单 ; 未 带 有 “ 电 ” 标 识 的 订单 指 的 
是 电器 城 未 被 打上 “ 电 ” 标 的 订单 ， 以 及 除 电 器 城 以 外 的 所 有 订单 。 
4), 2013 年 9 月 13 日 生效 ， 带 有 “ 电 ” 标 识 的 订单 ， 自 买 家 退 款 申请 提交 之 日 起 “5 天 内 ， 修 改 
为 3 天 内 ”。 


</p> 
<h3> 第 二 章 售 中 争议 处 理 规范 </h3> 
<p> 


ium 
H 


淘宝 将 基于 普通 人 的 判断 ， 根 据 本 规范 的 规定 对 买卖 双方 的 争议 做 出 处 理 。 部 分 买卖 双方 的 争议 ， 
夺权 发 起 方 有 权 选 择 〈 且 维权 相对 方 认 可 ) 由 大 众 评审 员 进行 判断 ， 淘 宝 网 将 根据 大 众 评审 员 的 判断 结果 对 
该 等 争议 作出 处 理 。 
淘宝 并 非 司 法 机 关 ， 对 和 凭证 /证 据 的 鉴别 能 力 及 对 争议 的 处 理 能 力 有 限 ， 淘 宝 不 保证 争议 处 理 结果 
符合 买 家 和 (或 ) 卖 家 的 期 望 ， 也 不 对 依据 本 规范 做 出 的 争议 处 理 结果 承担 任何 责任 。 


zm 


</p> 
<h3> 第 二 节 交易 标的 规范 </h3> 
<p> 


第 八条 
卖家 交付 给 买 家 的 商品 应 当 符合 法 律 法 规 的 相关 规定 ， 且 所 售 商 品 不 得 违反 《淘宝 规则 》 和 /或 《天 
猫 规 则 》 中 关于 发 布 违禁 信息 、 出 售 假冒 商品 、 小 发 信息 、 假 冒 材质 成 份 、 出 售 未 经 报关 进口 商品 、 发 布 非 
约定 商品 等 条 球 的 相关 规定 。 第 九条 
卖家 应 当 对 其 所 售 商 品 进行 如 实 描述 ， 即 应 当 在 商品 描述 页 面 、 店 铺 页 面 、 阿 里 旺旺 等 所 有 淘宝 
提供 的 渠道 中 ， 对 商品 的 基本 属性 、 成 色 、 瑕 竟 等 必须 说 明 的 信息 进行 真实 、 完 整 的 描述 。 


<h3> 第 二 节 交易 标的 规范 </h3> 


第 八条 

卖家 交付 给 买 家 的 商品 应 当 符 合法 律 法 规 的 相关 规定 , 且 所 售 商品 不 得 违反 《淘宝 规则 》 和 /或 《天 
猫 规则 》 中 关于 发 布 违禁 信息 、 出 售 假冒 商品 、 滥 发 信息 、 假 冒 材质 成 份 、 出 售 未 经 报关 进口 商品 、 发 布 非 
约定 商品 等 条 款 的 相关 规定 。 第 九条 

卖家 应 当 对 其 所 售 商品 进行 如 实 描述 ， 即 应 当 在 商品 描述 页 面 、 店 铺 页 面 、 阿 里 旺旺 等 所 有 淘宝 
提供 的 渠道 中 ， 对 商品 的 基本 属性 、 成 色 、 瑕 疯 等 必须 说 明 的 信息 进行 真实 、 完 整 的 描述 。 

</p> 
</div> 
</div> 


G) 设计 底部 导航 界面 ， 本 步骤 和 前 面 17.2.4 中 的 步骤 (3) 完全 一 样 。 
执行 后 的 效果 如 图 17-23 所 示 。 
注意 : 我 的 博客 页 面 blog.html 和 联系 我 们 页 面 contacthtml 的 有 具体 实现 过 程 和 前 面 的 关 
于 我 们 页 面 about.html 类 似 ， 在 此 不 再 进行 详细 讲解 。 
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WOMEN'S BEST CLOTHING 


退货 或 换 货 邮 费 该 由 谁 承担 ? 

买 家 退货 邮费 及 换 货 邮 贰 :原则 上 ， 谁 的 责任 谁 夭 担 ， 详 细 解 释 请 点 此 查看 。 例如 : 常见 情况 一 : 商品 质量 问题 、 实 物 与 描述 不 符 等 等 卖家 责任 导致 的 ， 邮 葛 卖 家 承担 常见 
情况 二 ， 买 家 没 选 合适 或 者 不 喜欢 需要 退货 ， 邮 费 买 家 承担 。 但 是 淘 小 二 知道 有 时 候 交 易 纠纷 的 邮费 争议 并 没有 那么 简单 ， 会 有 些 不 诚信 的 买 家 或 者 卖家 拒绝 去 承担 相关 的 邮费 ， 
遇 到 此 类 情况 ， 建 议 发 起 维权 ， 由 人 工 客服 来 帮助 协调 处 理 。 当 然 ， 邮 费 的 价值 有 时 候 并 不 高 ， 若 双方 能 各 退 一 步 ， 友 好 协商 处 理 当然 是 最 好 的 。 

超时 时 间 新 增 规则 提示 

(\D)、2013 年 8 月 16 日 生效 “卖家 不 同意 协议 , 等待 买 家 修改 〈 买 家 退货 后 ) ” 退 款 状态 下 的 超时 规则 (2)、 如 “卖家 不 同意 协议 , 等待 买 家 修改 ( 买 家 退货 退 款 状 态 下 ， 买 家 修 
改 协议 ， 则 回 到 “ 买 家 已 退货 ， 等 待 卖家 确认 ” 退 款 状态 下 的 超时 规则 。 全 )、 带 有 “ 电 ”标识 的 订单 指 的 是 电器 城 被 打上 “ 电 ” 标 的 订单 ; 未 带 有 “ a SEES AR 
未 被 打上 “ 电 ” 标 的 订单 ， 以 及 除 电器 城 以 外 的 所 有 订单 。 的 、2013 年 9 月 13 日 生效 ， 带 有 “ 电 ” 标 识 的 订单 ， 自 买 家 退 款 申请 提交 之 日 起 “5 天 内 ， 修 改 为 3 天 内 


第 二 章 售 中 争议 处 理 规范 


| 


17-23 ”执行 效果 


17.2.8 ”设计 CSS 3 样式 文件 
本 实例 的 样式 文件 是 style.css， 具 体 实现 流程 如 下 所 示 。 
(1) 分 别 为 <body> 和 <img> 标 记 设 置 样式 ， 具 体 实现 代码 如 下 
body { 


background: url(../images/bg-body.jpg) repeat left top; 
font-family: Arial, Helvetica, sans-serif; 


margin: 0; 
j 
img { 

border: 0; 
j 


(2) 为 系统 顶部 导航 设置 样式 ， 分 别 为 顶部 导航 <div> 块 “header”、“Logo”、“Navigation” 
编写 对 应 的 样式 ， 这 些 样式 代码 在 本 书 前 面 的 内 容 中 己 经 详细 讲解 。 上 有 具体 实现 代码 如 下 。 


#header { 


background: url(../images/bg-header.jpg) repeat-x left top; 
height: 160px; 


} 

#header > div { 
width: 940px; 
margin: 0 auto; 
padding: 0 10px; 
text-align: right; 

} 

/** Logo **/ 

#logo í 


float: left; 


EH 457 


HTML 5 天 发 从 入 门 到 精通 


(3) 为 系统 


ü 
ü 


j 

/** Navigation **/ 

Znavigation í 
display: inline-block; 
line-height: 150px; 
list-style: none; 
width: 510px; 


margin: 0; 
padding: 0; 
j 
Znavigation li í 
float: left; 
width: 102px; 
text-align: center; 
j 


navigation li:first-child í 
margin-left: 0; 

j 

?navigation li a í 
color: 49b660b; 
line-height: 60px; 
text-decoration: none; 
text-shadow: -2px 2px 1px 

j 


#000; 


#navigation li a:hover, #navigation li.selected a { 


color: #e29b1 f, 
} 


“about”, 产品 展示 页 面 样式 “shop” 


具体 实现 代码 如 下 所 示 。 
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#contents í 


background: #fff7db url(../1mages/content-border.jpg) repeat-x left bottom; 


min-height: 1080px; 
padding-bottom: 10px; 
} 
#contents > div { 
width: 960px; 
margin: 0 auto; 
padding-top: 50px; 
j 


#contents h3 í 


中 间 内 容 部 分 设置 样式 ， 具 体 实现 流程 如 下 。 
首先 设置 各 个 页 面 通用 区 域 的 样式 ， 例 如 “contents”。 
然后 为 各 个 页 面 设置 专用 检 


"eq 


和 式 ， 例 如 首页 中 的 “Adbox ”样式 ， 


关于 我 们 页 面 权 


T 


式 


color: #a17b2d; 
font-size: 16px; 
font-weight: normal; 
letter-spacing: 1px; 
margin: 0 

} 

#contents p í 
color: #aa9387; 
font-size: 13px; 
line-height: 24px; 
margin: 0 auto; 
padding: 0 0 24px; 
text-align: justify; 


j 


Zcontents p a í 


color: #aa9387; 


j 


#contents a:hover í 
color: #ce8763; 

j 

/** Adbox **/ 

#contents div£adbox í 
margin-bottom: 36px; 
padding: 0; 
text-align: center; 

j 

#adbox img í 
margin-bottom: 24px; 


} 

#adbox p í 
width: 600px; 
text-align: center; 
text-indent: 40px; 

j 


/** Featured **/ 
Zicontents divzfeatured í 
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background: url(../images/bg-featured.png) no-repeat center top; 


width: 100%; 
margin-bottom: 60px; 
padding: 30px 0 24px; 
text-align: center; 

J 

#featured ul í 
display: inline-block; 
list-style: none; 
width: 960px; 
margin: 0; 
padding: 0; 
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j 

#featured ul li í 
float: left; 
width: 300px; 
margin: 0 10px; 

j 

#featured p í 
padding: 0; 
text-align: center; 


j 


/** About **/ 
#contents div#about í 
width: 730px; 
padding: 20px 115px 0; 


j 


Zabout h3 í 
margin: 30px 0 0; 


j 


#about p í 
font-size: 13px; 
margin: 0 auto; 
text-align: justify 

j 

/** Shop **/ 

Zcontents divzshop í 
width: 930px; 
margin-bottom: 60px; 
padding-left: 10px; 
padding-right: 20px; 

j 

#shop > div í 
display: inline-block; 
margin: 0 0 30px; 


j 
Zshop > div img í 
float: left; 
margin: 0 40px 30px 0; 
j 
#main í 
float: left; 
min-height: 100px; 
width: 520px; 
margin: 0 30px 0 100px; 
j 


#main > div í 


background: url(../images/separator.png) no-repeat center bottom 


display: inline-block; 


, 
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margin: 0 0 18px; 
j 
#main > div h3 í 
margin: 30px 0 12px; 
j 
?tmain > div p í 
text-align: justify; 
j 
/** SIDEBAR **/ 
sidebar í 
float: left; 
background: url(../images/vborder.png) repeat-y left top; 
min-height: 848px; 
width: 180px; 
margin: 30px 0 0; 
padding-left: 21px; 


j 


Zsidebar h3 í 
margin: 15px 0 12px; 
padding-left: 40px; 

j 

#sidebar ul í 
list-style: none; 
margin: 0; 
padding: 0; 

j 

Zsidebar > ul li í 
margin: 0 0 24px; 

j 

#sidebar > ul li a { 
color: #aa9387; 
font-size: 14px; 
line-height: 24px; 
text-decoration: none; 

j 

Zsidebar ul li > div í 
display: none; 
width: 80px; 
padding-left: 40px; 

j 

Zsidebar ul li:hover > div í 
display: block; 

j 

sidebar ul li > div a í 
color: #aa9387; 
font-size: 12px; 
display: block; 
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#sidebar ul li > div a:hover í 
color: #ce8763; 

} 

/** Contact **/ 

#contents div#contact í 
width: 720px; 
padding: 50px 120px 0; 

j 

#contact h4 í 
color: #8a5c02; 
font-size: 15px; 
font-weight: normal; 
line-height: 24px; 
margin: 0; 

j 

#contact h4 a í 
color: #8a5c02; 
text-decoration: none; 

} 

#contact a.email { 
font-size: 13px; 

} 

#contact p.numbers { 
margin: 0 0 30px; 
padding-left: 40px; 

j 

#contact p.address í 
padding-left: 40px; 

} 


(4) 为 底部 导航 内 容 部 分 设置 样式 ， 设 置 联系 信息 内 容 的 样式 “connect”， 为 整体 部 分 设 
置 了 一 幅 背 景 图 ， 然 后 设置 了 儿 种 链接 方式 的 样式 。 具 体 实现 代码 如 下 。 


#footer { 
background: url(../images/bg-footer.png) repeat-x center bottom; 
padding: 18px 0 30px; 


} 

/** Connect **/ 

#connect { 
width: 960px; 
margin: 0 auto; 
padding: 0 0 30px; 
text-align: center; 

} 

#connect a í 


background: url(../images/icons.png) no-repeat; 
display: inline-block; 
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height: 39px; 
width: 40px; 
margin: 0 20px; 
j 
#connect a.facebook í 
background-position: 0 0; 
j 
Ziconnect a.email í 
background-position: 0 -49px; 
j 
#connect a.twitter í 
background-position: 0 -98px; 
} 
#connect a.googleplus { 
background-position: 0 -147px; 
j 
#footer p í 
color: #956836; 
font-size: 13px; 
line-height: 24px; 
width: 960px; 
margin: 0 auto; 
text-align: center; 


j 


经 过 CSS 3 样式 文件 的 设置 修饰 之 后 ， 整 个 页 面 将 以 我 们 预期 的 效果 展现 在 用 户 面前 。 
例如 产品 展示 页 面 文件 shop.html 的 最 终 执行 效果 如 图 17-24 所 示 。 


KJ 蜂蜜 柚子 茶 600g 
> 日 团购 ”营养 充足 ， 健 康美 丽 


玉兰 油 多 效 修 护 霜 50g 


日 团购 ”2011 年 215 P is < 88 


产品 展示 页 面 文件 的 最 终 执行 效果 
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